:root {
    --blue-50: #f4fafe;
    --blue-100: #cae6fc;
    --blue-200: #a0d2fa;
    --blue-300: #75bef8;
    --blue-400: #4baaf5;
    --blue-500: #2196f3;
    --blue-600: #1c80cf;
    --blue-700: #1769aa;
    --blue-800: #125386;
    --blue-900: #0d3c61;
    --green-50: #f6fbf6;
    --green-100: #d4ecd5;
    --green-200: #b2ddb4;
    --green-300: #90cd93;
    --green-400: #6ebe71;
    --green-500: #4caf50;
    --green-600: #419544;
    --green-700: #357b38;
    --green-800: #2a602c;
    --green-900: #1e4620;
    --yellow-50: #fffcf5;
    --yellow-100: #fef0cd;
    --yellow-200: #fde4a5;
    --yellow-300: #fdd87d;
    --yellow-400: #fccc55;
    --yellow-500: #fbc02d;
    --yellow-600: #d5a326;
    --yellow-700: #b08620;
    --yellow-800: #8a6a19;
    --yellow-900: #644d12;
    --cyan-50: #f2fcfd;
    --cyan-100: #c2eff5;
    --cyan-200: #91e2ed;
    --cyan-300: #61d5e4;
    --cyan-400: #30c9dc;
    --cyan-500: #00bcd4;
    --cyan-600: #00a0b4;
    --cyan-700: #008494;
    --cyan-800: #006775;
    --cyan-900: #004b55;
    --pink-50: #fef4f7;
    --pink-100: #fac9da;
    --pink-200: #f69ebc;
    --pink-300: #f1749e;
    --pink-400: #ed4981;
    --pink-500: #e91e63;
    --pink-600: #c61a54;
    --pink-700: #a31545;
    --pink-800: #801136;
    --pink-900: #5d0c28;
    --indigo-50: #f5f6fb;
    --indigo-100: #d1d5ed;
    --indigo-200: #acb4df;
    --indigo-300: #8893d1;
    --indigo-400: #6372c3;
    --indigo-500: #3f51b5;
    --indigo-600: #36459a;
    --indigo-700: #2c397f;
    --indigo-800: #232d64;
    --indigo-900: #192048;
    --teal-50: #f2faf9;
    --teal-100: #c2e6e2;
    --teal-200: #91d2cc;
    --teal-300: #61beb5;
    --teal-400: #30aa9f;
    --teal-500: #009688;
    --teal-600: #008074;
    --teal-700: #00695f;
    --teal-800: #00534b;
    --teal-900: #003c36;
    --orange-50: #fff8f2;
    --orange-100: #fde0c2;
    --orange-200: #fbc791;
    --orange-300: #f9ae61;
    --orange-400: #f79530;
    --orange-500: #f57c00;
    --orange-600: #d06900;
    --orange-700: #ac5700;
    --orange-800: #874400;
    --orange-900: #623200;
    --bluegray-50: #f7f9f9;
    --bluegray-100: #d9e0e3;
    --bluegray-200: #bbc7cd;
    --bluegray-300: #9caeb7;
    --bluegray-400: #7e96a1;
    --bluegray-500: #607d8b;
    --bluegray-600: #526a76;
    --bluegray-700: #435861;
    --bluegray-800: #35454c;
    --bluegray-900: #263238;
    --purple-50: #faf4fb;
    --purple-100: #e7cbec;
    --purple-200: #d4a2dd;
    --purple-300: #c279ce;
    --purple-400: #af50bf;
    --purple-500: #9c27b0;
    --purple-600: #852196;
    --purple-700: #6d1b7b;
    --purple-800: #561561;
    --purple-900: #3e1046;
    --red-50: #fff5f5;
    --red-100: #ffd1ce;
    --red-200: #ffada7;
    --red-300: #ff8980;
    --red-400: #ff6459;
    --red-500: #ff4032;
    --red-600: #d9362b;
    --red-700: #b32d23;
    --red-800: #8c231c;
    --red-900: #661a14;
    --primary-50: #f4fafe;
    --primary-100: #cae6fc;
    --primary-200: #a0d2fa;
    --primary-300: #75bef8;
    --primary-400: #4baaf5;
    --primary-500: #2196f3;
    --primary-600: #1c80cf;
    --primary-700: #1769aa;
    --primary-800: #125386;
    --primary-900: #0d3c61;

    --whatsapp: #25D366;

}

body.light {
    --base-color: #FFFFFF;
    --base-color-highlight: #f8f9fa;
}
body.dark {
    --base-color: #121212;
    --base-color-highlight: #1e1e1e;
}

/* COLOR */

body.light .color-blue {
    color: var(--blue-500);
}
body.light .color-blue-important {
    color: var(--blue-500)!important;
}
body.light .color-green {
    color: var(--green-500);
}
body.light .color-green-important {
    color: var(--green-500)!important;
}
body.light .color-yellow {
    color: var(--yellow-500);
}
body.light .color-yellow-important {
    color: var(--yellow-500)!important;
}
body.light .color-red {
    color: var(--red-500);
}
body.light .color-red-important {
    color: var(--red-500)!important;
}
body.light .color-purple {
    color: var(--purple-500);
}
body.light .color-purple-important {
    color: var(--purple-500)!important;
}
body.light .color-pink {
    color: var(--pink-500);
}
body.light .color-pink-important {
    color: var(--pink-500)!important;
}
body.light .color-white {
    color: white;
}
body.light .color-white-important {
    color: white!important;
}
body.light .color-black {
    color: black;
}
body.light .color-black-important {
    color: black!important;
}
body.light .color-whatsapp {
    color: var(--whatsapp);
}
body.light .color-whatsapp-important {
    color: var(--whatsapp) !important;
}
body.dark .color-blue {
    color: var(--blue-600);
}
body.dark .color-blue-important {
    color: var(--blue-600)!important;
}
body.dark .color-green {
    color: var(--green-600);
}
body.dark .color-green-important {
    color: var(--green-600)!important;
}
body.dark .color-yellow {
    color: var(--yellow-600);
}
body.dark .color-yellow-important {
    color: var(--yellow-600)!important;
}
body.dark .color-red {
    color: var(--red-600);
}
body.dark .color-red-important {
    color: var(--red-600)!important;
}
body.dark .color-purple {
    color: var(--purple-600);
}
body.dark .color-purple-important {
    color: var(--purple-600)!important;
}
body.dark .color-pink {
    color: var(--pink-600);
}
body.dark .color-pink-important {
    color: var(--pink-600)!important;
}
body.dark .color-white {
    color: white;
}
body.dark .color-white-important {
    color: white!important;
}
body.dark .color-black {
    color: black;
}
body.dark .color-black-important {
    color: black!important;
}
body.dark .color-whatsapp {
    color: var(--whatsapp);
}
body.dark .color-whatsapp-important {
    color: var(--whatsapp) !important;
}

/* BACKGROUND */

body.light .bg-blue {
    background-color: var(--blue-500);
}
body.light .bg-blue-important {
    background-color: var(--blue-500)!important;
}
body.light .bg-green {
    background-color: var(--green-500);
}
body.light .bg-green-important {
    background-color: var(--green-500)!important;
}
body.light .bg-yellow {
    background-color: var(--yellow-500);
}
body.light .bg-yellow-important {
    background-color: var(--yellow-500)!important;
}
body.light .bg-red {
    background-color: var(--red-500);
}
body.light .bg-red-important {
    background-color: var(--red-500)!important;
}
body.light .bg-purple {
    background-color: var(--purple-500);
}
body.light .bg-purple-important {
    background-color: var(--purple-500)!important;
}
body.light .bg-pink {
    background-color: var(--pink-500);
}
body.light .bg-pink-important {
    background-color: var(--pink-500)!important;
}
body.light .bg-white {
    background-color: white;
}
body.light .bg-white-important {
    background-color: white!important;
}
body.light .bg-black {
    background-color: black;
}
body.light .bg-black-important {
    background-color: black!important;
}
body.light .bg-whatsapp {
    background-color: var(--whatsapp);
}
body.light .bg-whatsapp-important {
    background-color: var(--whatsapp) !important;
}
body.dark .bg-blue {
    background-color: var(--blue-600);
}
body.dark .bg-blue-important {
    background-color: var(--blue-600)!important;
}
body.dark .bg-green {
    background-color: var(--green-600);
}
body.dark .bg-green-important {
    background-color: var(--green-600)!important;
}
body.dark .bg-yellow {
    background-color: var(--yellow-600);
}
body.dark .bg-yellow-important {
    background-color: var(--yellow-600)!important;
}
body.dark .bg-red {
    background-color: var(--red-600);
}
body.dark .bg-red-important {
    background-color: var(--red-600)!important;
}
body.dark .bg-purple {
    background-color: var(--purple-600);
}
body.dark .bg-purple-important {
    background-color: var(--purple-600)!important;
}
body.dark .bg-pink {
    background-color: var(--pink-600);
}
body.dark .bg-pink-important {
    background-color: var(--pink-600)!important;
}
body.dark .bg-white {
    background-color: white;
}
body.dark .bg-white-important {
    background-color: white!important;
}
body.dark .bg-black {
    background-color: black;
}
body.dark .bg-black-important {
    background-color: black!important;
}
body.dark .bg-whatsapp {
    background-color: var(--whatsapp);
}
body.dark .bg-whatsapp-important {
    background-color: var(--whatsapp) !important;
}

/* BORDER */

body.light .border-blue {
    border-color: var(--blue-500);
}
body.light .border-blue-important {
    border-color: var(--blue-500)!important;
}
body.light .border-green {
    border-color: var(--green-500);
}
body.light .border-green-important {
    border-color: var(--green-500)!important;
}
body.light .border-yellow {
    border-color: var(--yellow-500);
}
body.light .border-yellow-important {
    border-color: var(--yellow-500)!important;
}
body.light .border-red {
    border-color: var(--red-500);
}
body.light .border-red-important {
    border-color: var(--red-500)!important;
}
body.light .border-purple {
    border-color: var(--purple-500);
}
body.light .border-purple-important {
    border-color: var(--purple-500)!important;
}
body.light .border-pink {
    border-color: var(--pink-500);
}
body.light .border-pink-important {
    border-color: var(--pink-500)!important;
}
body.light .border-white {
    border-color: white;
}
body.light .border-white-important {
    border-color: white!important;
}
body.light .border-black {
    border-color: black;
}
body.light .border-black-important {
    border-color: black!important;
}
body.light .border-whatsapp {
    border-color: var(--whatsapp);
}
body.light .border-whatsapp-important {
    border-color: var(--whatsapp) !important;
}
body.dark .border-blue {
    border-color: var(--blue-600);
}
body.dark .border-blue-important {
    border-color: var(--blue-600)!important;
}
body.dark .border-green {
    border-color: var(--green-600);
}
body.dark .border-green-important {
    border-color: var(--green-600)!important;
}
body.dark .border-yellow {
    border-color: var(--yellow-600);
}
body.dark .border-yellow-important {
    border-color: var(--yellow-600)!important;
}
body.dark .border-red {
    border-color: var(--red-600);
}
body.dark .border-red-important {
    border-color: var(--red-600)!important;
}
body.dark .border-purple {
    border-color: var(--purple-600);
}
body.dark .border-purple-important {
    border-color: var(--purple-600)!important;
}
body.dark .border-pink {
    border-color: var(--pink-600);
}
body.dark .border-pink-important {
    border-color: var(--pink-600)!important;
}
body.dark .border-white {
    border-color: white;
}
body.dark .border-white-important {
    border-color: white!important;
}
body.dark .border-black {
    border-color: black;
}
body.dark .border-black-important {
    border-color: black!important;
}
body.dark .border-whatsapp {
    border-color: var(--whatsapp);
}
body.dark .border-whatsapp-important {
    border-color: var(--whatsapp) !important;
}

/* Extra small devices (phones, 640.99px and down) */
/* XS */
@media only screen and (max-width: 640.99px) {

    /* COLOR */

    body.light .xs-color-blue {
        color: var(--blue-500);
    }
    body.light .xs-color-blue-important {
        color: var(--blue-500)!important;
    }
    body.light .xs-color-green {
        color: var(--green-500);
    }
    body.light .xs-color-green-important {
        color: var(--green-500)!important;
    }
    body.light .xs-color-yellow {
        color: var(--yellow-500);
    }
    body.light .xs-color-yellow-important {
        color: var(--yellow-500)!important;
    }
    body.light .xs-color-red {
        color: var(--red-500);
    }
    body.light .xs-color-red-important {
        color: var(--red-500)!important;
    }
    body.light .xs-color-purple {
        color: var(--purple-500);
    }
    body.light .xs-color-purple-important {
        color: var(--purple-500)!important;
    }
    body.light .xs-color-pink {
        color: var(--pink-500);
    }
    body.light .xs-color-pink-important {
        color: var(--pink-500)!important;
    }
    body.light .xs-color-white {
        color: white;
    }
    body.light .xs-color-white-important {
        color: white!important;
    }
    body.light .xs-color-black {
        color: black;
    }
    body.light .xs-color-black-important {
        color: black!important;
    }
    body.light .xs-color-whatsapp {
        color: var(--whatsapp);
    }
    body.light .xs-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }
    body.dark .xs-color-blue {
        color: var(--blue-600);
    }
    body.dark .xs-color-blue-important {
        color: var(--blue-600)!important;
    }
    body.dark .xs-color-green {
        color: var(--green-600);
    }
    body.dark .xs-color-green-important {
        color: var(--green-600)!important;
    }
    body.dark .xs-color-yellow {
        color: var(--yellow-600);
    }
    body.dark .xs-color-yellow-important {
        color: var(--yellow-600)!important;
    }
    body.dark .xs-color-red {
        color: var(--red-600);
    }
    body.dark .xs-color-red-important {
        color: var(--red-600)!important;
    }
    body.dark .xs-color-purple {
        color: var(--purple-600);
    }
    body.dark .xs-color-purple-important {
        color: var(--purple-600)!important;
    }
    body.dark .xs-color-pink {
        color: var(--pink-600);
    }
    body.dark .xs-color-pink-important {
        color: var(--pink-600)!important;
    }
    body.dark .xs-color-white {
        color: white;
    }
    body.dark .xs-color-white-important {
        color: white!important;
    }
    body.dark .xs-color-black {
        color: black;
    }
    body.dark .xs-color-black-important {
        color: black!important;
    }
    body.dark .xs-color-whatsapp {
        color: var(--whatsapp);
    }
    body.dark .xs-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }

    /* BACKGROUND */

    body.light .xs-bg-blue {
        background-color: var(--blue-500);
    }
    body.light .xs-bg-blue-important {
        background-color: var(--blue-500)!important;
    }
    body.light .xs-bg-green {
        background-color: var(--green-500);
    }
    body.light .xs-bg-green-important {
        background-color: var(--green-500)!important;
    }
    body.light .xs-bg-yellow {
        background-color: var(--yellow-500);
    }
    body.light .xs-bg-yellow-important {
        background-color: var(--yellow-500)!important;
    }
    body.light .xs-bg-red {
        background-color: var(--red-500);
    }
    body.light .xs-bg-red-important {
        background-color: var(--red-500)!important;
    }
    body.light .xs-bg-purple {
        background-color: var(--purple-500);
    }
    body.light .xs-bg-purple-important {
        background-color: var(--purple-500)!important;
    }
    body.light .xs-bg-pink {
        background-color: var(--pink-500);
    }
    body.light .xs-bg-pink-important {
        background-color: var(--pink-500)!important;
    }
    body.light .xs-bg-white {
        background-color: white;
    }
    body.light .xs-bg-white-important {
        background-color: white!important;
    }
    body.light .xs-bg-black {
        background-color: black;
    }
    body.light .xs-bg-black-important {
        background-color: black!important;
    }
    body.light .xs-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.light .xs-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }
    body.dark .xs-bg-blue {
        background-color: var(--blue-600);
    }
    body.dark .xs-bg-blue-important {
        background-color: var(--blue-600)!important;
    }
    body.dark .xs-bg-green {
        background-color: var(--green-600);
    }
    body.dark .xs-bg-green-important {
        background-color: var(--green-600)!important;
    }
    body.dark .xs-bg-yellow {
        background-color: var(--yellow-600);
    }
    body.dark .xs-bg-yellow-important {
        background-color: var(--yellow-600)!important;
    }
    body.dark .xs-bg-red {
        background-color: var(--red-600);
    }
    body.dark .xs-bg-red-important {
        background-color: var(--red-600)!important;
    }
    body.dark .xs-bg-purple {
        background-color: var(--purple-600);
    }
    body.dark .xs-bg-purple-important {
        background-color: var(--purple-600)!important;
    }
    body.dark .xs-bg-pink {
        background-color: var(--pink-600);
    }
    body.dark .xs-bg-pink-important {
        background-color: var(--pink-600)!important;
    }
    body.dark .xs-bg-white {
        background-color: white;
    }
    body.dark .xs-bg-white-important {
        background-color: white!important;
    }
    body.dark .xs-bg-black {
        background-color: black;
    }
    body.dark .xs-bg-black-important {
        background-color: black!important;
    }
    body.dark .xs-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.dark .xs-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }

    /* BORDER */

    body.light .xs-border-blue {
        border-color: var(--blue-500);
    }
    body.light .xs-border-blue-important {
        border-color: var(--blue-500)!important;
    }
    body.light .xs-border-green {
        border-color: var(--green-500);
    }
    body.light .xs-border-green-important {
        border-color: var(--green-500)!important;
    }
    body.light .xs-border-yellow {
        border-color: var(--yellow-500);
    }
    body.light .xs-border-yellow-important {
        border-color: var(--yellow-500)!important;
    }
    body.light .xs-border-red {
        border-color: var(--red-500);
    }
    body.light .xs-border-red-important {
        border-color: var(--red-500)!important;
    }
    body.light .xs-border-purple {
        border-color: var(--purple-500);
    }
    body.light .xs-border-purple-important {
        border-color: var(--purple-500)!important;
    }
    body.light .xs-border-pink {
        border-color: var(--pink-500);
    }
    body.light .xs-border-pink-important {
        border-color: var(--pink-500)!important;
    }
    body.light .xs-border-white {
        border-color: white;
    }
    body.light .xs-border-white-important {
        border-color: white!important;
    }
    body.light .xs-border-black {
        border-color: black;
    }
    body.light .xs-border-black-important {
        border-color: black!important;
    }
    body.light .xs-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.light .xs-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }
    body.dark .xs-border-blue {
        border-color: var(--blue-600);
    }
    body.dark .xs-border-blue-important {
        border-color: var(--blue-600)!important;
    }
    body.dark .xs-border-green {
        border-color: var(--green-600);
    }
    body.dark .xs-border-green-important {
        border-color: var(--green-600)!important;
    }
    body.dark .xs-border-yellow {
        border-color: var(--yellow-600);
    }
    body.dark .xs-border-yellow-important {
        border-color: var(--yellow-600)!important;
    }
    body.dark .xs-border-red {
        border-color: var(--red-600);
    }
    body.dark .xs-border-red-important {
        border-color: var(--red-600)!important;
    }
    body.dark .xs-border-purple {
        border-color: var(--purple-600);
    }
    body.dark .xs-border-purple-important {
        border-color: var(--purple-600)!important;
    }
    body.dark .xs-border-pink {
        border-color: var(--pink-600);
    }
    body.dark .xs-border-pink-important {
        border-color: var(--pink-600)!important;
    }
    body.dark .xs-border-white {
        border-color: white;
    }
    body.dark .xs-border-white-important {
        border-color: white!important;
    }
    body.dark .xs-border-black {
        border-color: black;
    }
    body.dark .xs-border-black-important {
        border-color: black!important;
    }
    body.dark .xs-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.dark .xs-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }

}

/* Small devices (portrait tablets and large phones, 641px and up) */
/* SM */
@media only screen and (min-width: 641px) {

    /* COLOR */

    body.light .sm-color-blue {
        color: var(--blue-500);
    }
    body.light .sm-color-blue-important {
        color: var(--blue-500)!important;
    }
    body.light .sm-color-green {
        color: var(--green-500);
    }
    body.light .sm-color-green-important {
        color: var(--green-500)!important;
    }
    body.light .sm-color-yellow {
        color: var(--yellow-500);
    }
    body.light .sm-color-yellow-important {
        color: var(--yellow-500)!important;
    }
    body.light .sm-color-red {
        color: var(--red-500);
    }
    body.light .sm-color-red-important {
        color: var(--red-500)!important;
    }
    body.light .sm-color-purple {
        color: var(--purple-500);
    }
    body.light .sm-color-purple-important {
        color: var(--purple-500)!important;
    }
    body.light .sm-color-pink {
        color: var(--pink-500);
    }
    body.light .sm-color-pink-important {
        color: var(--pink-500)!important;
    }
    body.light .sm-color-white {
        color: white;
    }
    body.light .sm-color-white-important {
        color: white!important;
    }
    body.light .sm-color-black {
        color: black;
    }
    body.light .sm-color-black-important {
        color: black!important;
    }
    body.light .sm-color-whatsapp {
        color: var(--whatsapp);
    }
    body.light .sm-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }
    body.dark .sm-color-blue {
        color: var(--blue-600);
    }
    body.dark .sm-color-blue-important {
        color: var(--blue-600)!important;
    }
    body.dark .sm-color-green {
        color: var(--green-600);
    }
    body.dark .sm-color-green-important {
        color: var(--green-600)!important;
    }
    body.dark .sm-color-yellow {
        color: var(--yellow-600);
    }
    body.dark .sm-color-yellow-important {
        color: var(--yellow-600)!important;
    }
    body.dark .sm-color-red {
        color: var(--red-600);
    }
    body.dark .sm-color-red-important {
        color: var(--red-600)!important;
    }
    body.dark .sm-color-purple {
        color: var(--purple-600);
    }
    body.dark .sm-color-purple-important {
        color: var(--purple-600)!important;
    }
    body.dark .sm-color-pink {
        color: var(--pink-600);
    }
    body.dark .sm-color-pink-important {
        color: var(--pink-600)!important;
    }
    body.dark .sm-color-white {
        color: white;
    }
    body.dark .sm-color-white-important {
        color: white!important;
    }
    body.dark .sm-color-black {
        color: black;
    }
    body.dark .sm-color-black-important {
        color: black!important;
    }
    body.dark .sm-color-whatsapp {
        color: var(--whatsapp);
    }
    body.dark .sm-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }

    /* BACKGROUND */

    body.light .sm-bg-blue {
        background-color: var(--blue-500);
    }
    body.light .sm-bg-blue-important {
        background-color: var(--blue-500)!important;
    }
    body.light .sm-bg-green {
        background-color: var(--green-500);
    }
    body.light .sm-bg-green-important {
        background-color: var(--green-500)!important;
    }
    body.light .sm-bg-yellow {
        background-color: var(--yellow-500);
    }
    body.light .sm-bg-yellow-important {
        background-color: var(--yellow-500)!important;
    }
    body.light .sm-bg-red {
        background-color: var(--red-500);
    }
    body.light .sm-bg-red-important {
        background-color: var(--red-500)!important;
    }
    body.light .sm-bg-purple {
        background-color: var(--purple-500);
    }
    body.light .sm-bg-purple-important {
        background-color: var(--purple-500)!important;
    }
    body.light .sm-bg-pink {
        background-color: var(--pink-500);
    }
    body.light .sm-bg-pink-important {
        background-color: var(--pink-500)!important;
    }
    body.light .sm-bg-white {
        background-color: white;
    }
    body.light .sm-bg-white-important {
        background-color: white!important;
    }
    body.light .sm-bg-black {
        background-color: black;
    }
    body.light .sm-bg-black-important {
        background-color: black!important;
    }
    body.light .sm-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.light .sm-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }
    body.dark .sm-bg-blue {
        background-color: var(--blue-600);
    }
    body.dark .sm-bg-blue-important {
        background-color: var(--blue-600)!important;
    }
    body.dark .sm-bg-green {
        background-color: var(--green-600);
    }
    body.dark .sm-bg-green-important {
        background-color: var(--green-600)!important;
    }
    body.dark .sm-bg-yellow {
        background-color: var(--yellow-600);
    }
    body.dark .sm-bg-yellow-important {
        background-color: var(--yellow-600)!important;
    }
    body.dark .sm-bg-red {
        background-color: var(--red-600);
    }
    body.dark .sm-bg-red-important {
        background-color: var(--red-600)!important;
    }
    body.dark .sm-bg-purple {
        background-color: var(--purple-600);
    }
    body.dark .sm-bg-purple-important {
        background-color: var(--purple-600)!important;
    }
    body.dark .sm-bg-pink {
        background-color: var(--pink-600);
    }
    body.dark .sm-bg-pink-important {
        background-color: var(--pink-600)!important;
    }
    body.dark .sm-bg-white {
        background-color: white;
    }
    body.dark .sm-bg-white-important {
        background-color: white!important;
    }
    body.dark .sm-bg-black {
        background-color: black;
    }
    body.dark .sm-bg-black-important {
        background-color: black!important;
    }
    body.dark .sm-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.dark .sm-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }

    /* BORDER */

    body.light .sm-border-blue {
        border-color: var(--blue-500);
    }
    body.light .sm-border-blue-important {
        border-color: var(--blue-500)!important;
    }
    body.light .sm-border-green {
        border-color: var(--green-500);
    }
    body.light .sm-border-green-important {
        border-color: var(--green-500)!important;
    }
    body.light .sm-border-yellow {
        border-color: var(--yellow-500);
    }
    body.light .sm-border-yellow-important {
        border-color: var(--yellow-500)!important;
    }
    body.light .sm-border-red {
        border-color: var(--red-500);
    }
    body.light .sm-border-red-important {
        border-color: var(--red-500)!important;
    }
    body.light .sm-border-purple {
        border-color: var(--purple-500);
    }
    body.light .sm-border-purple-important {
        border-color: var(--purple-500)!important;
    }
    body.light .sm-border-pink {
        border-color: var(--pink-500);
    }
    body.light .sm-border-pink-important {
        border-color: var(--pink-500)!important;
    }
    body.light .sm-border-white {
        border-color: white;
    }
    body.light .sm-border-white-important {
        border-color: white!important;
    }
    body.light .sm-border-black {
        border-color: black;
    }
    body.light .sm-border-black-important {
        border-color: black!important;
    }
    body.light .sm-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.light .sm-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }
    body.dark .sm-border-blue {
        border-color: var(--blue-600);
    }
    body.dark .sm-border-blue-important {
        border-color: var(--blue-600)!important;
    }
    body.dark .sm-border-green {
        border-color: var(--green-600);
    }
    body.dark .sm-border-green-important {
        border-color: var(--green-600)!important;
    }
    body.dark .sm-border-yellow {
        border-color: var(--yellow-600);
    }
    body.dark .sm-border-yellow-important {
        border-color: var(--yellow-600)!important;
    }
    body.dark .sm-border-red {
        border-color: var(--red-600);
    }
    body.dark .sm-border-red-important {
        border-color: var(--red-600)!important;
    }
    body.dark .sm-border-purple {
        border-color: var(--purple-600);
    }
    body.dark .sm-border-purple-important {
        border-color: var(--purple-600)!important;
    }
    body.dark .sm-border-pink {
        border-color: var(--pink-600);
    }
    body.dark .sm-border-pink-important {
        border-color: var(--pink-600)!important;
    }
    body.dark .sm-border-white {
        border-color: white;
    }
    body.dark .sm-border-white-important {
        border-color: white!important;
    }
    body.dark .sm-border-black {
        border-color: black;
    }
    body.dark .sm-border-black-important {
        border-color: black!important;
    }
    body.dark .sm-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.dark .sm-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
/* MD */
@media only screen and (min-width: 768px) {

    /* COLOR */

    body.light .md-color-blue {
        color: var(--blue-500);
    }
    body.light .md-color-blue-important {
        color: var(--blue-500)!important;
    }
    body.light .md-color-green {
        color: var(--green-500);
    }
    body.light .md-color-green-important {
        color: var(--green-500)!important;
    }
    body.light .md-color-yellow {
        color: var(--yellow-500);
    }
    body.light .md-color-yellow-important {
        color: var(--yellow-500)!important;
    }
    body.light .md-color-red {
        color: var(--red-500);
    }
    body.light .md-color-red-important {
        color: var(--red-500)!important;
    }
    body.light .md-color-purple {
        color: var(--purple-500);
    }
    body.light .md-color-purple-important {
        color: var(--purple-500)!important;
    }
    body.light .md-color-pink {
        color: var(--pink-500);
    }
    body.light .md-color-pink-important {
        color: var(--pink-500)!important;
    }
    body.light .md-color-white {
        color: white;
    }
    body.light .md-color-white-important {
        color: white!important;
    }
    body.light .md-color-black {
        color: black;
    }
    body.light .md-color-black-important {
        color: black!important;
    }
    body.light .md-color-whatsapp {
        color: var(--whatsapp);
    }
    body.light .md-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }
    body.dark .md-color-blue {
        color: var(--blue-600);
    }
    body.dark .md-color-blue-important {
        color: var(--blue-600)!important;
    }
    body.dark .md-color-green {
        color: var(--green-600);
    }
    body.dark .md-color-green-important {
        color: var(--green-600)!important;
    }
    body.dark .md-color-yellow {
        color: var(--yellow-600);
    }
    body.dark .md-color-yellow-important {
        color: var(--yellow-600)!important;
    }
    body.dark .md-color-red {
        color: var(--red-600);
    }
    body.dark .md-color-red-important {
        color: var(--red-600)!important;
    }
    body.dark .md-color-purple {
        color: var(--purple-600);
    }
    body.dark .md-color-purple-important {
        color: var(--purple-600)!important;
    }
    body.dark .md-color-pink {
        color: var(--pink-600);
    }
    body.dark .md-color-pink-important {
        color: var(--pink-600)!important;
    }
    body.dark .md-color-white {
        color: white;
    }
    body.dark .md-color-white-important {
        color: white!important;
    }
    body.dark .md-color-black {
        color: black;
    }
    body.dark .md-color-black-important {
        color: black!important;
    }
    body.dark .md-color-whatsapp {
        color: var(--whatsapp);
    }
    body.dark .md-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }

    /* BACKGROUND */

    body.light .md-bg-blue {
        background-color: var(--blue-500);
    }
    body.light .md-bg-blue-important {
        background-color: var(--blue-500)!important;
    }
    body.light .md-bg-green {
        background-color: var(--green-500);
    }
    body.light .md-bg-green-important {
        background-color: var(--green-500)!important;
    }
    body.light .md-bg-yellow {
        background-color: var(--yellow-500);
    }
    body.light .md-bg-yellow-important {
        background-color: var(--yellow-500)!important;
    }
    body.light .md-bg-red {
        background-color: var(--red-500);
    }
    body.light .md-bg-red-important {
        background-color: var(--red-500)!important;
    }
    body.light .md-bg-purple {
        background-color: var(--purple-500);
    }
    body.light .md-bg-purple-important {
        background-color: var(--purple-500)!important;
    }
    body.light .md-bg-pink {
        background-color: var(--pink-500);
    }
    body.light .md-bg-pink-important {
        background-color: var(--pink-500)!important;
    }
    body.light .md-bg-white {
        background-color: white;
    }
    body.light .md-bg-white-important {
        background-color: white!important;
    }
    body.light .md-bg-black {
        background-color: black;
    }
    body.light .md-bg-black-important {
        background-color: black!important;
    }
    body.light .md-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.light .md-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }
    body.dark .md-bg-blue {
        background-color: var(--blue-600);
    }
    body.dark .md-bg-blue-important {
        background-color: var(--blue-600)!important;
    }
    body.dark .md-bg-green {
        background-color: var(--green-600);
    }
    body.dark .md-bg-green-important {
        background-color: var(--green-600)!important;
    }
    body.dark .md-bg-yellow {
        background-color: var(--yellow-600);
    }
    body.dark .md-bg-yellow-important {
        background-color: var(--yellow-600)!important;
    }
    body.dark .md-bg-red {
        background-color: var(--red-600);
    }
    body.dark .md-bg-red-important {
        background-color: var(--red-600)!important;
    }
    body.dark .md-bg-purple {
        background-color: var(--purple-600);
    }
    body.dark .md-bg-purple-important {
        background-color: var(--purple-600)!important;
    }
    body.dark .md-bg-pink {
        background-color: var(--pink-600);
    }
    body.dark .md-bg-pink-important {
        background-color: var(--pink-600)!important;
    }
    body.dark .md-bg-white {
        background-color: white;
    }
    body.dark .md-bg-white-important {
        background-color: white!important;
    }
    body.dark .md-bg-black {
        background-color: black;
    }
    body.dark .md-bg-black-important {
        background-color: black!important;
    }
    body.dark .md-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.dark .md-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }

    /* BORDER */

    body.light .md-border-blue {
        border-color: var(--blue-500);
    }
    body.light .md-border-blue-important {
        border-color: var(--blue-500)!important;
    }
    body.light .md-border-green {
        border-color: var(--green-500);
    }
    body.light .md-border-green-important {
        border-color: var(--green-500)!important;
    }
    body.light .md-border-yellow {
        border-color: var(--yellow-500);
    }
    body.light .md-border-yellow-important {
        border-color: var(--yellow-500)!important;
    }
    body.light .md-border-red {
        border-color: var(--red-500);
    }
    body.light .md-border-red-important {
        border-color: var(--red-500)!important;
    }
    body.light .md-border-purple {
        border-color: var(--purple-500);
    }
    body.light .md-border-purple-important {
        border-color: var(--purple-500)!important;
    }
    body.light .md-border-pink {
        border-color: var(--pink-500);
    }
    body.light .md-border-pink-important {
        border-color: var(--pink-500)!important;
    }
    body.light .md-border-white {
        border-color: white;
    }
    body.light .md-border-white-important {
        border-color: white!important;
    }
    body.light .md-border-black {
        border-color: black;
    }
    body.light .md-border-black-important {
        border-color: black!important;
    }
    body.light .md-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.light .md-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }
    body.dark .md-border-blue {
        border-color: var(--blue-600);
    }
    body.dark .md-border-blue-important {
        border-color: var(--blue-600)!important;
    }
    body.dark .md-border-green {
        border-color: var(--green-600);
    }
    body.dark .md-border-green-important {
        border-color: var(--green-600)!important;
    }
    body.dark .md-border-yellow {
        border-color: var(--yellow-600);
    }
    body.dark .md-border-yellow-important {
        border-color: var(--yellow-600)!important;
    }
    body.dark .md-border-red {
        border-color: var(--red-600);
    }
    body.dark .md-border-red-important {
        border-color: var(--red-600)!important;
    }
    body.dark .md-border-purple {
        border-color: var(--purple-600);
    }
    body.dark .md-border-purple-important {
        border-color: var(--purple-600)!important;
    }
    body.dark .md-border-pink {
        border-color: var(--pink-600);
    }
    body.dark .md-border-pink-important {
        border-color: var(--pink-600)!important;
    }
    body.dark .md-border-white {
        border-color: white;
    }
    body.dark .md-border-white-important {
        border-color: white!important;
    }
    body.dark .md-border-black {
        border-color: black;
    }
    body.dark .md-border-black-important {
        border-color: black!important;
    }
    body.dark .md-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.dark .md-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
/* LG */
@media only screen and (min-width: 992px) {

    /* COLOR */

    body.light .lg-color-blue {
        color: var(--blue-500);
    }
    body.light .lg-color-blue-important {
        color: var(--blue-500)!important;
    }
    body.light .lg-color-green {
        color: var(--green-500);
    }
    body.light .lg-color-green-important {
        color: var(--green-500)!important;
    }
    body.light .lg-color-yellow {
        color: var(--yellow-500);
    }
    body.light .lg-color-yellow-important {
        color: var(--yellow-500)!important;
    }
    body.light .lg-color-red {
        color: var(--red-500);
    }
    body.light .lg-color-red-important {
        color: var(--red-500)!important;
    }
    body.light .lg-color-purple {
        color: var(--purple-500);
    }
    body.light .lg-color-purple-important {
        color: var(--purple-500)!important;
    }
    body.light .lg-color-pink {
        color: var(--pink-500);
    }
    body.light .lg-color-pink-important {
        color: var(--pink-500)!important;
    }
    body.light .lg-color-white {
        color: white;
    }
    body.light .lg-color-white-important {
        color: white!important;
    }
    body.light .lg-color-black {
        color: black;
    }
    body.light .lg-color-black-important {
        color: black!important;
    }
    body.light .lg-color-whatsapp {
        color: var(--whatsapp);
    }
    body.light .lg-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }
    body.dark .lg-color-blue {
        color: var(--blue-600);
    }
    body.dark .lg-color-blue-important {
        color: var(--blue-600)!important;
    }
    body.dark .lg-color-green {
        color: var(--green-600);
    }
    body.dark .lg-color-green-important {
        color: var(--green-600)!important;
    }
    body.dark .lg-color-yellow {
        color: var(--yellow-600);
    }
    body.dark .lg-color-yellow-important {
        color: var(--yellow-600)!important;
    }
    body.dark .lg-color-red {
        color: var(--red-600);
    }
    body.dark .lg-color-red-important {
        color: var(--red-600)!important;
    }
    body.dark .lg-color-purple {
        color: var(--purple-600);
    }
    body.dark .lg-color-purple-important {
        color: var(--purple-600)!important;
    }
    body.dark .lg-color-pink {
        color: var(--pink-600);
    }
    body.dark .lg-color-pink-important {
        color: var(--pink-600)!important;
    }
    body.dark .lg-color-white {
        color: white;
    }
    body.dark .lg-color-white-important {
        color: white!important;
    }
    body.dark .lg-color-black {
        color: black;
    }
    body.dark .lg-color-black-important {
        color: black!important;
    }
    body.dark .lg-color-whatsapp {
        color: var(--whatsapp);
    }
    body.dark .lg-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }

    /* BACKGROUND */

    body.light .lg-bg-blue {
        background-color: var(--blue-500);
    }
    body.light .lg-bg-blue-important {
        background-color: var(--blue-500)!important;
    }
    body.light .lg-bg-green {
        background-color: var(--green-500);
    }
    body.light .lg-bg-green-important {
        background-color: var(--green-500)!important;
    }
    body.light .lg-bg-yellow {
        background-color: var(--yellow-500);
    }
    body.light .lg-bg-yellow-important {
        background-color: var(--yellow-500)!important;
    }
    body.light .lg-bg-red {
        background-color: var(--red-500);
    }
    body.light .lg-bg-red-important {
        background-color: var(--red-500)!important;
    }
    body.light .lg-bg-purple {
        background-color: var(--purple-500);
    }
    body.light .lg-bg-purple-important {
        background-color: var(--purple-500)!important;
    }
    body.light .lg-bg-pink {
        background-color: var(--pink-500);
    }
    body.light .lg-bg-pink-important {
        background-color: var(--pink-500)!important;
    }
    body.light .lg-bg-white {
        background-color: white;
    }
    body.light .lg-bg-white-important {
        background-color: white!important;
    }
    body.light .lg-bg-black {
        background-color: black;
    }
    body.light .lg-bg-black-important {
        background-color: black!important;
    }
    body.light .lg-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.light .lg-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }
    body.dark .lg-bg-blue {
        background-color: var(--blue-600);
    }
    body.dark .lg-bg-blue-important {
        background-color: var(--blue-600)!important;
    }
    body.dark .lg-bg-green {
        background-color: var(--green-600);
    }
    body.dark .lg-bg-green-important {
        background-color: var(--green-600)!important;
    }
    body.dark .lg-bg-yellow {
        background-color: var(--yellow-600);
    }
    body.dark .lg-bg-yellow-important {
        background-color: var(--yellow-600)!important;
    }
    body.dark .lg-bg-red {
        background-color: var(--red-600);
    }
    body.dark .lg-bg-red-important {
        background-color: var(--red-600)!important;
    }
    body.dark .lg-bg-purple {
        background-color: var(--purple-600);
    }
    body.dark .lg-bg-purple-important {
        background-color: var(--purple-600)!important;
    }
    body.dark .lg-bg-pink {
        background-color: var(--pink-600);
    }
    body.dark .lg-bg-pink-important {
        background-color: var(--pink-600)!important;
    }
    body.dark .lg-bg-white {
        background-color: white;
    }
    body.dark .lg-bg-white-important {
        background-color: white!important;
    }
    body.dark .lg-bg-black {
        background-color: black;
    }
    body.dark .lg-bg-black-important {
        background-color: black!important;
    }
    body.dark .lg-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.dark .lg-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }

    /* BORDER */

    body.light .lg-border-blue {
        border-color: var(--blue-500);
    }
    body.light .lg-border-blue-important {
        border-color: var(--blue-500)!important;
    }
    body.light .lg-border-green {
        border-color: var(--green-500);
    }
    body.light .lg-border-green-important {
        border-color: var(--green-500)!important;
    }
    body.light .lg-border-yellow {
        border-color: var(--yellow-500);
    }
    body.light .lg-border-yellow-important {
        border-color: var(--yellow-500)!important;
    }
    body.light .lg-border-red {
        border-color: var(--red-500);
    }
    body.light .lg-border-red-important {
        border-color: var(--red-500)!important;
    }
    body.light .lg-border-purple {
        border-color: var(--purple-500);
    }
    body.light .lg-border-purple-important {
        border-color: var(--purple-500)!important;
    }
    body.light .lg-border-pink {
        border-color: var(--pink-500);
    }
    body.light .lg-border-pink-important {
        border-color: var(--pink-500)!important;
    }
    body.light .lg-border-white {
        border-color: white;
    }
    body.light .lg-border-white-important {
        border-color: white!important;
    }
    body.light .lg-border-black {
        border-color: black;
    }
    body.light .lg-border-black-important {
        border-color: black!important;
    }
    body.light .lg-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.light .lg-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }
    body.dark .lg-border-blue {
        border-color: var(--blue-600);
    }
    body.dark .lg-border-blue-important {
        border-color: var(--blue-600)!important;
    }
    body.dark .lg-border-green {
        border-color: var(--green-600);
    }
    body.dark .lg-border-green-important {
        border-color: var(--green-600)!important;
    }
    body.dark .lg-border-yellow {
        border-color: var(--yellow-600);
    }
    body.dark .lg-border-yellow-important {
        border-color: var(--yellow-600)!important;
    }
    body.dark .lg-border-red {
        border-color: var(--red-600);
    }
    body.dark .lg-border-red-important {
        border-color: var(--red-600)!important;
    }
    body.dark .lg-border-purple {
        border-color: var(--purple-600);
    }
    body.dark .lg-border-purple-important {
        border-color: var(--purple-600)!important;
    }
    body.dark .lg-border-pink {
        border-color: var(--pink-600);
    }
    body.dark .lg-border-pink-important {
        border-color: var(--pink-600)!important;
    }
    body.dark .lg-border-white {
        border-color: white;
    }
    body.dark .lg-border-white-important {
        border-color: white!important;
    }
    body.dark .lg-border-black {
        border-color: black;
    }
    body.dark .lg-border-black-important {
        border-color: black!important;
    }
    body.dark .lg-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.dark .lg-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* XL */
@media only screen and (min-width: 1200px) {

    /* COLOR */

    body.light .xl-color-blue {
        color: var(--blue-500);
    }
    body.light .xl-color-blue-important {
        color: var(--blue-500)!important;
    }
    body.light .xl-color-green {
        color: var(--green-500);
    }
    body.light .xl-color-green-important {
        color: var(--green-500)!important;
    }
    body.light .xl-color-yellow {
        color: var(--yellow-500);
    }
    body.light .xl-color-yellow-important {
        color: var(--yellow-500)!important;
    }
    body.light .xl-color-red {
        color: var(--red-500);
    }
    body.light .xl-color-red-important {
        color: var(--red-500)!important;
    }
    body.light .xl-color-purple {
        color: var(--purple-500);
    }
    body.light .xl-color-purple-important {
        color: var(--purple-500)!important;
    }
    body.light .xl-color-pink {
        color: var(--pink-500);
    }
    body.light .xl-color-pink-important {
        color: var(--pink-500)!important;
    }
    body.light .xl-color-white {
        color: white;
    }
    body.light .xl-color-white-important {
        color: white!important;
    }
    body.light .xl-color-black {
        color: black;
    }
    body.light .xl-color-black-important {
        color: black!important;
    }
    body.light .xl-color-whatsapp {
        color: var(--whatsapp);
    }
    body.light .xl-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }
    body.dark .xl-color-blue {
        color: var(--blue-600);
    }
    body.dark .xl-color-blue-important {
        color: var(--blue-600)!important;
    }
    body.dark .xl-color-green {
        color: var(--green-600);
    }
    body.dark .xl-color-green-important {
        color: var(--green-600)!important;
    }
    body.dark .xl-color-yellow {
        color: var(--yellow-600);
    }
    body.dark .xl-color-yellow-important {
        color: var(--yellow-600)!important;
    }
    body.dark .xl-color-red {
        color: var(--red-600);
    }
    body.dark .xl-color-red-important {
        color: var(--red-600)!important;
    }
    body.dark .xl-color-purple {
        color: var(--purple-600);
    }
    body.dark .xl-color-purple-important {
        color: var(--purple-600)!important;
    }
    body.dark .xl-color-pink {
        color: var(--pink-600);
    }
    body.dark .xl-color-pink-important {
        color: var(--pink-600)!important;
    }
    body.dark .xl-color-white {
        color: white;
    }
    body.dark .xl-color-white-important {
        color: white!important;
    }
    body.dark .xl-color-black {
        color: black;
    }
    body.dark .xl-color-black-important {
        color: black!important;
    }
    body.dark .xl-color-whatsapp {
        color: var(--whatsapp);
    }
    body.dark .xl-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }

    /* BACKGROUND */

    body.light .xl-bg-blue {
        background-color: var(--blue-500);
    }
    body.light .xl-bg-blue-important {
        background-color: var(--blue-500)!important;
    }
    body.light .xl-bg-green {
        background-color: var(--green-500);
    }
    body.light .xl-bg-green-important {
        background-color: var(--green-500)!important;
    }
    body.light .xl-bg-yellow {
        background-color: var(--yellow-500);
    }
    body.light .xl-bg-yellow-important {
        background-color: var(--yellow-500)!important;
    }
    body.light .xl-bg-red {
        background-color: var(--red-500);
    }
    body.light .xl-bg-red-important {
        background-color: var(--red-500)!important;
    }
    body.light .xl-bg-purple {
        background-color: var(--purple-500);
    }
    body.light .xl-bg-purple-important {
        background-color: var(--purple-500)!important;
    }
    body.light .xl-bg-pink {
        background-color: var(--pink-500);
    }
    body.light .xl-bg-pink-important {
        background-color: var(--pink-500)!important;
    }
    body.light .xl-bg-white {
        background-color: white;
    }
    body.light .xl-bg-white-important {
        background-color: white!important;
    }
    body.light .xl-bg-black {
        background-color: black;
    }
    body.light .xl-bg-black-important {
        background-color: black!important;
    }
    body.light .xl-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.light .xl-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }
    body.dark .xl-bg-blue {
        background-color: var(--blue-600);
    }
    body.dark .xl-bg-blue-important {
        background-color: var(--blue-600)!important;
    }
    body.dark .xl-bg-green {
        background-color: var(--green-600);
    }
    body.dark .xl-bg-green-important {
        background-color: var(--green-600)!important;
    }
    body.dark .xl-bg-yellow {
        background-color: var(--yellow-600);
    }
    body.dark .xl-bg-yellow-important {
        background-color: var(--yellow-600)!important;
    }
    body.dark .xl-bg-red {
        background-color: var(--red-600);
    }
    body.dark .xl-bg-red-important {
        background-color: var(--red-600)!important;
    }
    body.dark .xl-bg-purple {
        background-color: var(--purple-600);
    }
    body.dark .xl-bg-purple-important {
        background-color: var(--purple-600)!important;
    }
    body.dark .xl-bg-pink {
        background-color: var(--pink-600);
    }
    body.dark .xl-bg-pink-important {
        background-color: var(--pink-600)!important;
    }
    body.dark .xl-bg-white {
        background-color: white;
    }
    body.dark .xl-bg-white-important {
        background-color: white!important;
    }
    body.dark .xl-bg-black {
        background-color: black;
    }
    body.dark .xl-bg-black-important {
        background-color: black!important;
    }
    body.dark .xl-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.dark .xl-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }

    /* BORDER */

    body.light .xl-border-blue {
        border-color: var(--blue-500);
    }
    body.light .xl-border-blue-important {
        border-color: var(--blue-500)!important;
    }
    body.light .xl-border-green {
        border-color: var(--green-500);
    }
    body.light .xl-border-green-important {
        border-color: var(--green-500)!important;
    }
    body.light .xl-border-yellow {
        border-color: var(--yellow-500);
    }
    body.light .xl-border-yellow-important {
        border-color: var(--yellow-500)!important;
    }
    body.light .xl-border-red {
        border-color: var(--red-500);
    }
    body.light .xl-border-red-important {
        border-color: var(--red-500)!important;
    }
    body.light .xl-border-purple {
        border-color: var(--purple-500);
    }
    body.light .xl-border-purple-important {
        border-color: var(--purple-500)!important;
    }
    body.light .xl-border-pink {
        border-color: var(--pink-500);
    }
    body.light .xl-border-pink-important {
        border-color: var(--pink-500)!important;
    }
    body.light .xl-border-white {
        border-color: white;
    }
    body.light .xl-border-white-important {
        border-color: white!important;
    }
    body.light .xl-border-black {
        border-color: black;
    }
    body.light .xl-border-black-important {
        border-color: black!important;
    }
    body.light .xl-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.light .xl-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }
    body.dark .xl-border-blue {
        border-color: var(--blue-600);
    }
    body.dark .xl-border-blue-important {
        border-color: var(--blue-600)!important;
    }
    body.dark .xl-border-green {
        border-color: var(--green-600);
    }
    body.dark .xl-border-green-important {
        border-color: var(--green-600)!important;
    }
    body.dark .xl-border-yellow {
        border-color: var(--yellow-600);
    }
    body.dark .xl-border-yellow-important {
        border-color: var(--yellow-600)!important;
    }
    body.dark .xl-border-red {
        border-color: var(--red-600);
    }
    body.dark .xl-border-red-important {
        border-color: var(--red-600)!important;
    }
    body.dark .xl-border-purple {
        border-color: var(--purple-600);
    }
    body.dark .xl-border-purple-important {
        border-color: var(--purple-600)!important;
    }
    body.dark .xl-border-pink {
        border-color: var(--pink-600);
    }
    body.dark .xl-border-pink-important {
        border-color: var(--pink-600)!important;
    }
    body.dark .xl-border-white {
        border-color: white;
    }
    body.dark .xl-border-white-important {
        border-color: white!important;
    }
    body.dark .xl-border-black {
        border-color: black;
    }
    body.dark .xl-border-black-important {
        border-color: black!important;
    }
    body.dark .xl-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.dark .xl-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }

}

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* INSIDE OF REFLOW */
@media only screen and (max-width: 640px) {

    /* COLOR */

    body.light .reflow-color-blue {
        color: var(--blue-500);
    }
    body.light .reflow-color-blue-important {
        color: var(--blue-500)!important;
    }
    body.light .reflow-color-green {
        color: var(--green-500);
    }
    body.light .reflow-color-green-important {
        color: var(--green-500)!important;
    }
    body.light .reflow-color-yellow {
        color: var(--yellow-500);
    }
    body.light .reflow-color-yellow-important {
        color: var(--yellow-500)!important;
    }
    body.light .reflow-color-red {
        color: var(--red-500);
    }
    body.light .reflow-color-red-important {
        color: var(--red-500)!important;
    }
    body.light .reflow-color-purple {
        color: var(--purple-500);
    }
    body.light .reflow-color-purple-important {
        color: var(--purple-500)!important;
    }
    body.light .reflow-color-pink {
        color: var(--pink-500);
    }
    body.light .reflow-color-pink-important {
        color: var(--pink-500)!important;
    }
    body.light .reflow-color-white {
        color: white;
    }
    body.light .reflow-color-white-important {
        color: white!important;
    }
    body.light .reflow-color-black {
        color: black;
    }
    body.light .reflow-color-black-important {
        color: black!important;
    }
    body.light .reflow-color-whatsapp {
        color: var(--whatsapp);
    }
    body.light .reflow-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }
    body.dark .reflow-color-blue {
        color: var(--blue-600);
    }
    body.dark .reflow-color-blue-important {
        color: var(--blue-600)!important;
    }
    body.dark .reflow-color-green {
        color: var(--green-600);
    }
    body.dark .reflow-color-green-important {
        color: var(--green-600)!important;
    }
    body.dark .reflow-color-yellow {
        color: var(--yellow-600);
    }
    body.dark .reflow-color-yellow-important {
        color: var(--yellow-600)!important;
    }
    body.dark .reflow-color-red {
        color: var(--red-600);
    }
    body.dark .reflow-color-red-important {
        color: var(--red-600)!important;
    }
    body.dark .reflow-color-purple {
        color: var(--purple-600);
    }
    body.dark .reflow-color-purple-important {
        color: var(--purple-600)!important;
    }
    body.dark .reflow-color-pink {
        color: var(--pink-600);
    }
    body.dark .reflow-color-pink-important {
        color: var(--pink-600)!important;
    }
    body.dark .reflow-color-white {
        color: white;
    }
    body.dark .reflow-color-white-important {
        color: white!important;
    }
    body.dark .reflow-color-black {
        color: black;
    }
    body.dark .reflow-color-black-important {
        color: black!important;
    }
    body.dark .reflow-color-whatsapp {
        color: var(--whatsapp);
    }
    body.dark .reflow-color-whatsapp-important {
        color: var(--whatsapp) !important;
    }

    /* BACKGROUND */

    body.light .reflow-bg-blue {
        background-color: var(--blue-500);
    }
    body.light .reflow-bg-blue-important {
        background-color: var(--blue-500)!important;
    }
    body.light .reflow-bg-green {
        background-color: var(--green-500);
    }
    body.light .reflow-bg-green-important {
        background-color: var(--green-500)!important;
    }
    body.light .reflow-bg-yellow {
        background-color: var(--yellow-500);
    }
    body.light .reflow-bg-yellow-important {
        background-color: var(--yellow-500)!important;
    }
    body.light .reflow-bg-red {
        background-color: var(--red-500);
    }
    body.light .reflow-bg-red-important {
        background-color: var(--red-500)!important;
    }
    body.light .reflow-bg-purple {
        background-color: var(--purple-500);
    }
    body.light .reflow-bg-purple-important {
        background-color: var(--purple-500)!important;
    }
    body.light .reflow-bg-pink {
        background-color: var(--pink-500);
    }
    body.light .reflow-bg-pink-important {
        background-color: var(--pink-500)!important;
    }
    body.light .reflow-bg-white {
        background-color: white;
    }
    body.light .reflow-bg-white-important {
        background-color: white!important;
    }
    body.light .reflow-bg-black {
        background-color: black;
    }
    body.light .reflow-bg-black-important {
        background-color: black!important;
    }
    body.light .reflow-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.light .reflow-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }
    body.dark .reflow-bg-blue {
        background-color: var(--blue-600);
    }
    body.dark .reflow-bg-blue-important {
        background-color: var(--blue-600)!important;
    }
    body.dark .reflow-bg-green {
        background-color: var(--green-600);
    }
    body.dark .reflow-bg-green-important {
        background-color: var(--green-600)!important;
    }
    body.dark .reflow-bg-yellow {
        background-color: var(--yellow-600);
    }
    body.dark .reflow-bg-yellow-important {
        background-color: var(--yellow-600)!important;
    }
    body.dark .reflow-bg-red {
        background-color: var(--red-600);
    }
    body.dark .reflow-bg-red-important {
        background-color: var(--red-600)!important;
    }
    body.dark .reflow-bg-purple {
        background-color: var(--purple-600);
    }
    body.dark .reflow-bg-purple-important {
        background-color: var(--purple-600)!important;
    }
    body.dark .reflow-bg-pink {
        background-color: var(--pink-600);
    }
    body.dark .reflow-bg-pink-important {
        background-color: var(--pink-600)!important;
    }
    body.dark .reflow-bg-white {
        background-color: white;
    }
    body.dark .reflow-bg-white-important {
        background-color: white!important;
    }
    body.dark .reflow-bg-black {
        background-color: black;
    }
    body.dark .reflow-bg-black-important {
        background-color: black!important;
    }
    body.dark .reflow-bg-whatsapp {
        background-color: var(--whatsapp);
    }
    body.dark .reflow-bg-whatsapp-important {
        background-color: var(--whatsapp) !important;
    }

    /* BORDER */

    body.light .reflow-border-blue {
        border-color: var(--blue-500);
    }
    body.light .reflow-border-blue-important {
        border-color: var(--blue-500)!important;
    }
    body.light .reflow-border-green {
        border-color: var(--green-500);
    }
    body.light .reflow-border-green-important {
        border-color: var(--green-500)!important;
    }
    body.light .reflow-border-yellow {
        border-color: var(--yellow-500);
    }
    body.light .reflow-border-yellow-important {
        border-color: var(--yellow-500)!important;
    }
    body.light .reflow-border-red {
        border-color: var(--red-500);
    }
    body.light .reflow-border-red-important {
        border-color: var(--red-500)!important;
    }
    body.light .reflow-border-purple {
        border-color: var(--purple-500);
    }
    body.light .reflow-border-purple-important {
        border-color: var(--purple-500)!important;
    }
    body.light .reflow-border-pink {
        border-color: var(--pink-500);
    }
    body.light .reflow-border-pink-important {
        border-color: var(--pink-500)!important;
    }
    body.light .reflow-border-white {
        border-color: white;
    }
    body.light .reflow-border-white-important {
        border-color: white!important;
    }
    body.light .reflow-border-black {
        border-color: black;
    }
    body.light .reflow-border-black-important {
        border-color: black!important;
    }
    body.light .reflow-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.light .reflow-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }
    body.dark .reflow-border-blue {
        border-color: var(--blue-600);
    }
    body.dark .reflow-border-blue-important {
        border-color: var(--blue-600)!important;
    }
    body.dark .reflow-border-green {
        border-color: var(--green-600);
    }
    body.dark .reflow-border-green-important {
        border-color: var(--green-600)!important;
    }
    body.dark .reflow-border-yellow {
        border-color: var(--yellow-600);
    }
    body.dark .reflow-border-yellow-important {
        border-color: var(--yellow-600)!important;
    }
    body.dark .reflow-border-red {
        border-color: var(--red-600);
    }
    body.dark .reflow-border-red-important {
        border-color: var(--red-600)!important;
    }
    body.dark .reflow-border-purple {
        border-color: var(--purple-600);
    }
    body.dark .reflow-border-purple-important {
        border-color: var(--purple-600)!important;
    }
    body.dark .reflow-border-pink {
        border-color: var(--pink-600);
    }
    body.dark .reflow-border-pink-important {
        border-color: var(--pink-600)!important;
    }
    body.dark .reflow-border-white {
        border-color: white;
    }
    body.dark .reflow-border-white-important {
        border-color: white!important;
    }
    body.dark .reflow-border-black {
        border-color: black;
    }
    body.dark .reflow-border-black-important {
        border-color: black!important;
    }
    body.dark .reflow-border-whatsapp {
        border-color: var(--whatsapp);
    }
    body.dark .reflow-border-whatsapp-important {
        border-color: var(--whatsapp) !important;
    }

}

.color-primary {
    color: var(--primary-500);
}
.color-primary-hover:hover {
    color: var(--primary-500);
}

.color-primary-on-direct-children > * {
    color: var(--primary-500);
}
.color-primary-hover-on-direct-children:hover > * {
    color: var(--primary-500);
}

.color-primary-on-all-children * {
    color: var(--primary-500);
}
.color-primary-hover-on-all-children:hover * {
    color: var(--primary-500);
}

.color-base-color {
    color: var(--base-color);
}
.color-base-color-highlight {
    color: var(--base-color-highlight);
}

.bg-base-color {
    background-color: var(--base-color);
}
.bg-base-color-highlight {
    background-color: var(--base-color-highlight);
}