:root {
    --Transparent: transparent;
    --Default: #cdcdcd;
    --Default-Light: #ebebeb;
    --Default-Strong: #b9b9b9;
    --Default-Dark: #a0a0a0;
    --Default-Soft: #D6D6D6;
    --Default-Ghost: #F2F2F2;
    --Default_RGBA: 205, 205, 205;
    --Default-Light_RGBA: 235, 235, 235;
    --Default-Strong_RGBA: 185, 185, 185;
    --Default-Dark_RGBA: 160, 160, 160;
    --Default-Soft_RGBA: 214, 214, 214;
    --Default-Ghost_RGBA: 242, 242, 242;
    --White: #ffffff;
    --White-Light: #f9f9f9;
    --White-Strong: #f5f5f5;
    --White-Dark: #f0f0f0;
    --White-Soft: #F4F9F9;
    --White-Ghost: #FAFAFA;
    --White_RGBA: 255, 255, 255;
    --White-Light_RGBA: 249, 249, 249;
    --White-Strong_RGBA: 245, 245, 245;
    --White-Dark_RGBA: 240, 240, 240;
    --White-Soft_RGBA: 244, 249, 249;
    --White-Ghost_RGBA: 250, 250, 250;
    --Primary: #1C6DB5;
    --Primary-Light: #6ECDEF;
    --Primary-Strong: #0367A6;
    --Primary-Dark: #023859;
    --Primary-Soft: #3DB4E7;
    --Primary-Ghost: #3397D3;
    --Primary_RGBA: 28, 109, 181;
    --Primary-Light_RGBA: 110, 205, 239;
    --Primary-Strong_RGBA: 3, 103, 166;
    --Primary-Dark_RGBA: 2, 56, 89;
    --Primary-Soft_RGBA: 61, 180, 231;
    --Primary-Ghost_RGBA: 51, 151, 211;
    --Secondary: #6b9ab3;
    --Secondary-Light: #91d0f2;
    --Secondary-Strong: #54798c;
    --Secondary-Dark: #3d5866;
    --Secondary-Soft: #71869d;
    --Secondary-Ghost: #69AABF;
    --Secondary_RGBA: 107, 154, 179;
    --Secondary-Light_RGBA: 145, 208, 242;
    --Secondary-Strong_RGBA: 84, 121, 140;
    --Secondary-Dark_RGBA: 61, 88, 102;
    --Secondary-Soft_RGBA: 113, 134, 157;
    --Secondary-Ghost_RGBA: 105, 170, 191;
    --Info: #f2c774;
    --Info-Light: #ffd37a;
    --Info-Strong: #b39456;
    --Info-Dark: #735f37;
    --Info-Soft: #f5ca99;
    --Info-Ghost: #F7C66A;
    --Info_RGBA: 242, 199, 116;
    --Info-Light_RGBA: 255, 211, 122;
    --Info-Strong_RGBA: 179, 148, 86;
    --Info-Dark_RGBA: 115, 95, 55;
    --Info-Soft_RGBA: 245, 202, 153;
    --Info-Ghost_RGBA: 247, 198, 106;
    --Optional: #c3d9d9;
    --Optional-Light: #daf2f2;
    --Optional-Strong: #a1b3b3;
    --Optional-Dark: #677373;
    --Optional-Soft: #09a5be;
    --Optional-Ghost: #BDDEDC;
    --Optional_RGBA: 195, 217, 217;
    --Optional-Light_RGBA: 218, 242, 242;
    --Optional-Strong_RGBA: 161, 179, 179;
    --Optional-Dark_RGBA: 103, 115, 115;
    --Optional-Soft_RGBA: 9, 165, 190;
    --Optional-Ghost_RGBA: 189, 222, 220;
    --Warning: #db6802;
    --Warning-Light: #ff7803;
    --Warning-Strong: #b05302;
    --Warning-Dark: #803c01;
    --Warning-Soft: #f5ca99;
    --Warning-Ghost: #F5E399;
    --Warning_RGBA: 219, 104, 2;
    --Warning-Light_RGBA: 255, 120, 3;
    --Warning-Strong_RGBA: 176, 83, 2;
    --Warning-Dark_RGBA: 128, 60, 1;
    --Warning-Soft_RGBA: 245, 202, 153;
    --Warning-Ghost_RGBA: 245, 227, 153;
    --Failed: #bd2225;
    --Failed-Light: #f02b2e;
    --Failed-Strong: #a61e20;
    --Failed-Dark: #791617;
    --Failed-Soft: #ED4C65;
    --Failed-Ghost: #ED8F80;
    --Failed_RGBA: 189, 34, 37;
    --Failed-Light_RGBA: 240, 43, 46;
    --Failed-Strong_RGBA: 166, 30, 32;
    --Failed-Dark_RGBA: 121, 22, 23;
    --Failed-Soft_RGBA: 237, 76, 101;
    --Failed-Ghost_RGBA: 237, 143, 128;
    --Success: #86b03e;
    --Success-Light: #b7f054;
    --Success-Strong: #698a30;
    --Success-Dark: #4c6323;
    --Success-Soft: #00c9a7;
    --Success-Ghost: #86B06C;
    --Success_RGBA: 134, 176, 62;
    --Success-Light_RGBA: 183, 240, 84;
    --Success-Strong_RGBA: 105, 138, 48;
    --Success-Dark_RGBA: 76, 99, 35;
    --Success-Soft_RGBA: 0, 201, 167;
    --Success-Ghost_RGBA: 134, 176, 108;
    --Dark: #333331;
    --Dark-Light: #73736f;
    --Dark-Strong: #262625;
    --Dark-Dark: #171716;
    --Dark-Ghost: #BFBFBF;
    --Dark-Soft: #21325b;
    --Dark_RGBA: 51, 51, 49;
    --Dark-Light_RGBA: 115, 115, 111;
    --Dark-Strong_RGBA: 38, 38, 37;
    --Dark-Dark_RGBA: 23, 23, 22;
    --Dark-Ghost_RGBA: 179, 179, 136;
    --Dark-Soft_RGBA: 223, 208, 165;
}
/**Icons**/
@font-face {
    font-family: "cdicon-default";
    src: url("../../files/icons/CDIconDefault.eot");
    /* IE9 Compat Modes */
    src: url("../../files/icons/CDIconDefault.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../../files/icons/CDIconDefault.otf") format("opentype"), /* Open Type Font */
    url("../../files/icons/CDIconDefault.svg") format("svg"), /* Legacy iOS */
    url("../../files/icons/CDIconDefault.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../../files/icons/CDIconDefault.woff") format("woff"), /* Modern Browsers */
    url("../../files/icons/CDIconDefault.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "cdicon-data";
    src: url("../../files/icons/CDIconData.eot");
    /* IE9 Compat Modes */
    src: url("../../files/icons/CDIconData.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../../files/icons/CDIconData.otf") format("opentype"), /* Open Type Font */
    url("../../files/icons/CDIconData.svg") format("svg"), /* Legacy iOS */
    url("../../files/icons/CDIconData.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../../files/icons/CDIconData.woff") format("woff"), /* Modern Browsers */
    url("../../files/icons/CDIconData.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "cdicon-user";
    src: url("../../files/icons/CDIconUser.eot");
    /* IE9 Compat Modes */
    src: url("../../files/icons/CDIconUser.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../../files/icons/CDIconUser.otf") format("opentype"), /* Open Type Font */
    url("../../files/icons/CDIconUser.svg") format("svg"), /* Legacy iOS */
    url("../../files/icons/CDIconUser.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../../files/icons/CDIconUser.woff") format("woff"), /* Modern Browsers */
    url("../../files/icons/CDIconUser.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "cdicon-action";
    src: url("../../files/icons/CDIconAction.eot");
    /* IE9 Compat Modes */
    src: url("../../files/icons/CDIconAction.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../../files/icons/CDIconAction.otf") format("opentype"), /* Open Type Font */
    url("../../files/icons/CDIconAction.svg") format("svg"), /* Legacy iOS */
    url("../../files/icons/CDIconAction.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../../files/icons/CDIconAction.woff") format("woff"), /* Modern Browsers */
    url("../../files/icons/CDIconAction.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "cdicon-direction";
    src: url("../../files/icons/CDIconDirection.eot");
    /* IE9 Compat Modes */
    src: url("../../files/icons/CDIconDirection.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../../files/icons/CDIconDirection.otf") format("opentype"), /* Open Type Font */
    url("../../files/icons/CDIconDirection.svg") format("svg"), /* Legacy iOS */
    url("../../files/icons/CDIconDirection.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../../files/icons/CDIconDirection.woff") format("woff"), /* Modern Browsers */
    url("../../files/icons/CDIconDirection.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "cdicon-solution";
    src: url("../../files/icons/CDIconSolution.eot");
    /* IE9 Compat Modes */
    src: url("../../files/icons/CDIconSolution.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../../files/icons/CDIconSolution.otf") format("opentype"), /* Open Type Font */
    url("../../files/icons/CDIconSolution.svg") format("svg"), /* Legacy iOS */
    url("../../files/icons/CDIconSolution.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../../files/icons/CDIconSolution.woff") format("woff"), /* Modern Browsers */
    url("../../files/icons/CDIconSolution.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
/**Fonts**/
@font-face {
    font-family: "cdfont-neue";
    src: url("../../files/fonts/BebasNeue-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-cairo";
    src: url("../../files/fonts/Cairo-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-cinzel";
    src: url("../../files/fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
    font-weight: normal, bold, bolder;
}
@font-face {
    font-family: "cdfont-exo";
    src: url("../../files/fonts/Exo-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: normal, bold, bolder;
    font-style: italic;
}
@font-face {
    font-family: "cdfont-exo";
    src: url("../../files/fonts/Exo-VariableFont_wght.ttf") format("truetype");
    font-weight: normal, bold, bolder;
    font-style: normal;
}
@font-face {
    font-family: "cdfont-fjalla";
    src: url("../../files/fonts/FjallaOne-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-libre";
    src: url("../../files/fonts/LibreBaskerville-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-libre";
    src: url("../../files/fonts/LibreBaskerville-Bold.ttf") format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: "cdfont-libre";
    src: url("../../files/fonts/LibreBaskerville-Italic.ttf") format("truetype");
    font-style: italic;
}
@font-face {
    font-family: "cdfont-noticia";
    src: url("../../files/fonts/NoticiaText-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-noticia";
    src: url("../../files/fonts/NoticiaText-Italic.ttf") format("truetype");
    font-style: italic;
}
@font-face {
    font-family: "cdfont-noticia";
    src: url("../../files/fonts/NoticiaText-Bold.ttf") format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: "cdfont-noticia";
    src: url("../../files/fonts/NoticiaText-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "cdfont-roboto";
    src: url("../../files/fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-oswald";
    src: url("../../files/fonts/Oswald-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "cdfont-opensans";
    src: url("../../files/fonts/OpenSans-Regular.ttf") format("truetype");
}
/**Fonts**/
.font-neue {
    font-family: "cdfont-neue" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-opensans {
    font-family: "cdfont-opensans" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-oswald {
    font-family: "cdfont-oswald" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-roboto {
    font-family: "cdfont-roboto" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-noticia {
    font-family: "cdfont-noticia" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-libre {
    font-family: "cdfont-libre" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-fjalla {
    font-family: "cdfont-fjalla" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-exo {
    font-family: "cdfont-exo" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-cinzel {
    font-family: "cdfont-cinzel" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-cairo {
    font-family: "cdfont-cairo" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-times {
    font-family: 'Times New Roman', Times, serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-sansserif {
    font-family: sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-tahoma {
    font-family: tahoma !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-verdana {
    font-family: Verdana, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-monospace {
    font-family: monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/**Icons**/
[class^="cdicon-default-"]:before,
[class*=" cdicon-default-"]:before {
    font-family: "cdicon-default" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="cdicon-data-"]:before,
[class*=" cdicon-data-"]:before {
    font-family: "cdicon-data" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="cdicon-user-"]:before,
[class*=" cdicon-user-"]:before {
    font-family: "cdicon-user" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="cdicon-action-"]:before,
[class*=" cdicon-action-"]:before {
    font-family: "cdicon-action" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="cdicon-direction-"]:before,
[class*=" cdicon-direction-"]:before {
    font-family: "cdicon-direction" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^="cdicon-solution-"]:before,
[class*=" cdicon-solution-"]:before {
    font-family: "cdicon-solution" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Background Colors */
.bg-transparent,
.bg-none {
    background-color: var(--Transparent) !important;
}

.bg-default,
.bg-default-before:before,
.bg-default-after:after,
.bg-default-hover:hover {
    background-color: var(--Default) !important;
    color: var(--Dark);
}

.bg-default-l,
.bg-default-l-before:before,
.bg-default-l-after:after,
.bg-default-l-hover:hover {
    background-color: var(--Default-Light) !important;
}

.bg-default-s,
.bg-default-s-before:before,
.bg-default-s-after:after,
.bg-default-s-hover:hover {
    background-color: var(--Default-Strong) !important;
}

.bg-default-d,
.bg-default-d-before:before,
.bg-default-d-after:after,
.bg-default-d-hover:hover {
    background-color: var(--Default-Dark) !important;
}

.bg-default-f,
.bg-default-f-before:before,
.bg-default-f-after:after,
.bg-default-f-hover:hover {
    background-color: var(--Default-Soft) !important;
}

.bg-default-g,
.bg-default-g-before:before,
.bg-default-g-after:after,
.bg-default-g-hover:hover {
    background-color: var(--Default-Ghost) !important;
}

.bg-default-gradient,
.bg-default-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default_RGBA), 1), rgba(var(--Default-Light_RGBA), 1));
}

.bg-default-l-gradient,
.bg-default-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Light_RGBA), 1), rgba(var(--Default_RGBA), 1));
}

.bg-default-s-gradient,
.bg-default-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Strong_RGBA), 1), rgba(var(--Default-Soft_RGBA), 1));
}

.bg-default-d-gradient,
.bg-default-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Dark_RGBA), 1), rgba(var(--Default-Ghost_RGBA), 1));
}

.bg-default-f-gradient,
.bg-default-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Soft_RGBA), 1), rgba(var(--Default-Strong_RGBA), 1));
}

.bg-default-g-gradient,
.bg-default-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Ghost_RGBA), 1), rgba(var(--Default-Dark_RGBA), 1));
}

.bg-white,
.bg-white-before:before,
.bg-white-after:after,
.bg-white-hover:hover {
    background-color: var(--White) !important;
}

.bg-white-l,
.bg-white-l-before:before,
.bg-white-l-after:after,
.bg-white-l-hover:hover {
    background-color: var(--White-Light) !important;
}

.bg-white-s,
.bg-white-s-before:before,
.bg-white-s-after:after,
.bg-white-s-hover:hover {
    background-color: var(--White-Strong) !important;
}

.bg-white-d,
.bg-white-d-before:before,
.bg-white-d-after:after,
.bg-white-d-hover:hover {
    background-color: var(--White-Dark) !important;
}

.bg-white-f,
.bg-white-f-before:before,
.bg-white-f-after:after,
.bg-white-f-hover:hover {
    background-color: var(--White-Soft) !important;
}

.bg-white-g,
.bg-white-g-before:before,
.bg-white-g-after:after,
.bg-white-g-hover:hover {
    background-color: var(--White-Ghost) !important;
}

.bg-white-gradient,
.bg-white-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White_RGBA), 1), rgba(var(--White-Light_RGBA), 1));
}

.bg-white-l-gradient,
.bg-white-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Light_RGBA), 1), rgba(var(--White_RGBA), 1));
}

.bg-white-s-gradient,
.bg-white-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Strong_RGBA), 1), rgba(var(--White-Soft_RGBA), 1));
}

.bg-white-d-gradient,
.bg-white-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Dark_RGBA), 1), rgba(var(--White-Ghost_RGBA), 1));
}

.bg-white-f-gradient,
.bg-white-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Soft_RGBA), 1), rgba(var(--White-Strong_RGBA), 1));
}

.bg-white-g-gradient,
.bg-white-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Ghost_RGBA), 1), rgba(var(--White-Dark_RGBA), 1));
}

.bg-primary,
.bg-primary-before:before,
.bg-primary-after:after,
.bg-primary-hover:hover {
    background-color: var(--Primary) !important;
}

.bg-primary-l,
.bg-primary-l-before:before,
.bg-primary-l-after:after,
.bg-primary-l-hover:hover {
    background-color: var(--Primary-Light) !important;
}

.bg-primary-s,
.bg-primary-s-before:before,
.bg-primary-s-after:after,
.bg-primary-s-hover:hover {
    background-color: var(--Primary-Strong) !important;
}

.bg-primary-d,
.bg-primary-d-before:before,
.bg-primary-d-after:after,
.bg-primary-d-hover:hover {
    background-color: var(--Primary-Dark) !important;
}

.bg-primary-f,
.bg-primary-f-before:before,
.bg-primary-f-after:after,
.bg-primary-f-hover:hover {
    background-color: var(--Primary-Soft) !important;
}

.bg-primary-g,
.bg-primary-g-before:before,
.bg-primary-g-after:after,
.bg-primary-g-hover:hover {
    background-color: var(--Primary-Ghost) !important;
}

.bg-primary-gradient,
.bg-primary-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary_RGBA), 1), rgba(var(--Primary-Light_RGBA), 1));
}

.bg-primary-l-gradient,
.bg-primary-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Light_RGBA), 1), rgba(var(--Primary_RGBA), 1));
}

.bg-primary-s-gradient,
.bg-primary-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Strong_RGBA), 1), rgba(var(--Primary-Soft_RGBA), 1));
}

.bg-primary-d-gradient,
.bg-primary-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Dark_RGBA), 1), rgba(var(--Primary-Ghost_RGBA), 1));
}

.bg-primary-f-gradient,
.bg-primary-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Soft_RGBA), 1), rgba(var(--Primary-Strong_RGBA), 1));
}

.bg-primary-g-gradient,
.bg-primary-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Ghost_RGBA), 1), rgba(var(--Primary-Dark_RGBA), 1));
}

.bg-secondary,
.bg-secondary-before:before,
.bg-secondary-after:after,
.bg-secondary-hover:hover {
    background-color: var(--Secondary) !important;
}

.bg-secondary-l,
.bg-secondary-l-before:before,
.bg-secondary-l-after:after,
.bg-secondary-l-hover:hover {
    background-color: var(--Secondary-Light) !important;
}

.bg-secondary-s,
.bg-secondary-s-before:before,
.bg-secondary-s-after:after,
.bg-secondary-s-hover:hover {
    background-color: var(--Secondary-Strong) !important;
}

.bg-secondary-d,
.bg-secondary-d-before:before,
.bg-secondary-d-after:after,
.bg-secondary-d-hover:hover {
    background-color: var(--Secondary-Dark) !important;
}

.bg-secondary-f,
.bg-secondary-f-before:before,
.bg-secondary-f-after:after,
.bg-secondary-f-hover:hover {
    background-color: var(--Secondary-Soft) !important;
}

.bg-secondary-g,
.bg-secondary-g-before:before,
.bg-secondary-g-after:after,
.bg-secondary-g-hover:hover {
    background-color: var(--Secondary-Ghost) !important;
}

.bg-secondary-gradient,
.bg-secondary-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary_RGBA), 1), rgba(var(--Secondary-Light_RGBA), 1));
}

.bg-secondary-l-gradient,
.bg-secondary-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Light_RGBA), 1), rgba(var(--Secondary_RGBA), 1));
}

.bg-secondary-s-gradient,
.bg-secondary-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Strong_RGBA), 1), rgba(var(--Secondary-Soft_RGBA), 1));
}

.bg-secondary-d-gradient,
.bg-secondary-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Dark_RGBA), 1), rgba(var(--Secondary-Ghost_RGBA), 1));
}

.bg-secondary-f-gradient,
.bg-secondary-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Soft_RGBA), 1), rgba(var(--Secondary-Strong_RGBA), 1));
}

.bg-secondary-g-gradient,
.bg-secondary-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Ghost_RGBA), 1), rgba(var(--Secondary-Dark_RGBA), 1));
}

.bg-optional,
.bg-optional-before:before,
.bg-optional-after:after,
.bg-optional-hover:hover {
    background-color: var(--Optional) !important;
}

.bg-optional-l,
.bg-optional-l-before:before,
.bg-optional-l-after:after,
.bg-optional-l-hover:hover {
    background-color: var(--Optional-Light) !important;
}

.bg-optional-s,
.bg-optional-s-before:before,
.bg-optional-s-after:after,
.bg-optional-s-hover:hover {
    background-color: var(--Optional-Strong) !important;
}

.bg-optional-d,
.bg-optional-d-before:before,
.bg-optional-d-after:after,
.bg-optional-d-hover:hover {
    background-color: var(--Optional-Dark) !important;
}

.bg-optional-f,
.bg-optional-f-before:before,
.bg-optional-f-after:after,
.bg-optional-f-hover:hover {
    background-color: var(--Optional-Soft) !important;
}

.bg-optional-g,
.bg-optional-g-before:before,
.bg-optional-g-after:after,
.bg-optional-g-hover:hover {
    background-color: var(--Optional-Ghost) !important;
}

.bg-optional-gradient,
.bg-optional-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional_RGBA), 1), rgba(var(--Optional-Light_RGBA), 1));
}

.bg-optional-l-gradient,
.bg-optional-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Light_RGBA), 1), rgba(var(--Optional_RGBA), 1));
}

.bg-optional-s-gradient,
.bg-optional-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Strong_RGBA), 1), rgba(var(--Optional-Soft_RGBA), 1));
}

.bg-optional-d-gradient,
.bg-optional-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Dark_RGBA), 1), rgba(var(--Optional-Ghost_RGBA), 1));
}

.bg-optional-f-gradient,
.bg-optional-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Soft_RGBA), 1), rgba(var(--Optional-Strong_RGBA), 1));
}

.bg-optional-g-gradient,
.bg-optional-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Ghost_RGBA), 1), rgba(var(--Optional-Dark_RGBA), 1));
}

.bg-info,
.bg-info-before:before,
.bg-info-after:after,
.bg-info-hover:hover {
    background-color: var(--Info) !important;
}

.bg-info-l,
.bg-info-l-before:before,
.bg-info-l-after:after,
.bg-info-l-hover:hover {
    background-color: var(--Info-Light) !important;
}

.bg-info-s,
.bg-info-s-before:before,
.bg-info-s-after:after,
.bg-info-s-hover:hover {
    background-color: var(--Info-Strong) !important;
}

.bg-info-d,
.bg-info-d-before:before,
.bg-info-d-after:after,
.bg-info-d-hover:hover {
    background-color: var(--Info-Dark) !important;
}

.bg-info-f,
.bg-info-f-before:before,
.bg-info-f-after:after,
.bg-info-f-hover:hover {
    background-color: var(--Info-Soft) !important;
}

.bg-info-g,
.bg-info-g-before:before,
.bg-info-g-after:after,
.bg-info-g-hover:hover {
    background-color: var(--Info-Ghost) !important;
}

.bg-info-gradient,
.bg-info-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info_RGBA), 1), rgba(var(--Info-Light_RGBA), 1));
}

.bg-info-l-gradient,
.bg-info-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Light_RGBA), 1), rgba(var(--Info_RGBA), 1));
}

.bg-info-s-gradient,
.bg-info-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Strong_RGBA), 1), rgba(var(--Info-Soft_RGBA), 1));
}

.bg-info-d-gradient,
.bg-info-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Dark_RGBA), 1), rgba(var(--Info-Ghost_RGBA), 1));
}

.bg-info-f-gradient,
.bg-info-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Soft_RGBA), 1), rgba(var(--Info-Strong_RGBA), 1));
}

.bg-info-g-gradient,
.bg-info-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Ghost_RGBA), 1), rgba(var(--Info-Dark_RGBA), 1));
}

.bg-warning,
.bg-warning-before:before,
.bg-warning-after:after,
.bg-warning-hover:hover {
    background-color: var(--Warning) !important;
}

.bg-warning-l,
.bg-warning-l-before:before,
.bg-warning-l-after:after,
.bg-warning-l-hover:hover {
    background-color: var(--Warning-Light) !important;
}

.bg-warning-s,
.bg-warning-s-before:before,
.bg-warning-s-after:after,
.bg-warning-s-hover:hover {
    background-color: var(--Warning-Strong) !important;
}

.bg-warning-d,
.bg-warning-d-before:before,
.bg-warning-d-after:after,
.bg-warning-d-hover:hover {
    background-color: var(--Warning-Dark) !important;
}

.bg-warning-f,
.bg-warning-f-before:before,
.bg-warning-f-after:after,
.bg-warning-f-hover:hover {
    background-color: var(--Warning-Soft) !important;
}

.bg-warning-g,
.bg-warning-g-before:before,
.bg-warning-g-after:after,
.bg-warning-g-hover:hover {
    background-color: var(--Warning-Ghost) !important;
}

.bg-warning-gradient,
.bg-warning-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning_RGBA), 1), rgba(var(--Warning-Light_RGBA), 1));
}

.bg-warning-l-gradient,
.bg-warning-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Light_RGBA), 1), rgba(var(--Warning_RGBA), 1));
}

.bg-warning-s-gradient,
.bg-warning-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Strong_RGBA), 1), rgba(var(--Warning-Soft_RGBA), 1));
}

.bg-warning-d-gradient,
.bg-warning-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Dark_RGBA), 1), rgba(var(--Warning-Ghost_RGBA), 1));
}

.bg-warning-f-gradient,
.bg-warning-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Soft_RGBA), 1), rgba(var(--Warning-Strong_RGBA), 1));
}

.bg-warning-g-gradient,
.bg-warning-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Ghost_RGBA), 1), rgba(var(--Warning-Dark_RGBA), 1));
}

.bg-failed,
.bg-failed-before:before,
.bg-failed-after:after,
.bg-failed-hover:hover {
    background-color: var(--Failed) !important;
}

.bg-failed-l,
.bg-failed-l-before:before,
.bg-failed-l-after:after,
.bg-failed-l-hover:hover {
    background-color: var(--Failed-Light) !important;
}

.bg-failed-s,
.bg-failed-s-before:before,
.bg-failed-s-after:after,
.bg-failed-s-hover:hover {
    background-color: var(--Failed-Strong) !important;
}

.bg-failed-d,
.bg-failed-d-before:before,
.bg-failed-d-after:after,
.bg-failed-d-hover:hover {
    background-color: var(--Failed-Dark) !important;
}

.bg-failed-f,
.bg-failed-f-before:before,
.bg-failed-f-after:after,
.bg-failed-f-hover:hover {
    background-color: var(--Failed-Soft) !important;
}

.bg-failed-g,
.bg-failed-g-before:before,
.bg-failed-g-after:after,
.bg-failed-g-hover:hover {
    background-color: var(--Failed-Ghost) !important;
}

.bg-failed-gradient,
.bg-failed-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed_RGBA), 1), rgba(var(--Failed-Light_RGBA), 1));
}

.bg-failed-l-gradient,
.bg-failed-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Light_RGBA), 1), rgba(var(--Failed_RGBA), 1));
}

.bg-failed-s-gradient,
.bg-failed-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Strong_RGBA), 1), rgba(var(--Failed-Soft_RGBA), 1));
}

.bg-failed-d-gradient,
.bg-failed-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Dark_RGBA), 1), rgba(var(--Failed-Ghost_RGBA), 1));
}

.bg-failed-f-gradient,
.bg-failed-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Soft_RGBA), 1), rgba(var(--Failed-Strong_RGBA), 1));
}

.bg-failed-g-gradient,
.bg-failed-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Ghost_RGBA), 1), rgba(var(--Failed-Dark_RGBA), 1));
}

.bg-success,
.bg-success-before:before,
.bg-success-after:after,
.bg-success-hover:hover {
    background-color: var(--Success) !important;
}

.bg-success-l,
.bg-success-l-before:before,
.bg-success-l-after:after,
.bg-success-l-hover:hover {
    background-color: var(--Success-Light) !important;
}

.bg-success-s,
.bg-success-s-before:before,
.bg-success-s-after:after,
.bg-success-s-hover:hover {
    background-color: var(--Success-Strong) !important;
}

.bg-success-d,
.bg-success-d-before:before,
.bg-success-d-after:after,
.bg-success-d-hover:hover {
    background-color: var(--Success-Dark) !important;
}

.bg-success-f,
.bg-success-f-before:before,
.bg-success-f-after:after,
.bg-success-f-hover:hover {
    background-color: var(--Success-Soft) !important;
}

.bg-success-g,
.bg-success-g-before:before,
.bg-success-g-after:after,
.bg-success-g-hover:hover {
    background-color: var(--Success-Ghost) !important;
}

.bg-success-gradient,
.bg-success-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success_RGBA), 1), rgba(var(--Success-Light_RGBA), 1));
}

.bg-success-l-gradient,
.bg-success-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Light_RGBA), 1), rgba(var(--Success_RGBA), 1));
}

.bg-success-s-gradient,
.bg-success-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Strong_RGBA), 1), rgba(var(--Success-Soft_RGBA), 1));
}

.bg-success-d-gradient,
.bg-success-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Dark_RGBA), 1), rgba(var(--Success-Ghost_RGBA), 1));
}

.bg-success-f-gradient,
.bg-success-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Soft_RGBA), 1), rgba(var(--Success-Strong_RGBA), 1));
}

.bg-success-g-gradient,
.bg-success-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Ghost_RGBA), 1), rgba(var(--Success-Dark_RGBA), 1));
}

.bg-dark,
.bg-dark-before:before,
.bg-dark-after:after,
.bg-dark-hover:hover {
    background-color: var(--Dark) !important;
}

.bg-dark-l,
.bg-dark-l-before:before,
.bg-dark-l-after:after,
.bg-dark-l-hover:hover {
    background-color: var(--Dark-Light) !important;
}

.bg-dark-s,
.bg-dark-s-before:before,
.bg-dark-s-after:after,
.bg-dark-s-hover:hover {
    background-color: var(--Dark-Strong) !important;
}

.bg-dark-d,
.bg-dark-d-before:before,
.bg-dark-d-after:after,
.bg-dark-d-hover:hover {
    background-color: var(--Dark-Dark) !important;
}

.bg-dark-f,
.bg-dark-f-before:before,
.bg-dark-f-after:after,
.bg-dark-f-hover:hover {
    background-color: var(--Dark-Soft) !important;
}

.bg-dark-g,
.bg-dark-g-before:before,
.bg-dark-g-after:after,
.bg-dark-g-hover:hover {
    background-color: var(--Dark-Ghost) !important;
}

.bg-dark-gradient,
.bg-dark-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark_RGBA), 1), rgba(var(--Dark-Light_RGBA), 1));
}

.bg-dark-l-gradient,
.bg-dark-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Light_RGBA), 1), rgba(var(--Dark_RGBA), 1));
}

.bg-dark-s-gradient,
.bg-dark-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Strong_RGBA), 1), rgba(var(--Dark-Soft_RGBA), 1));
}

.bg-dark-d-gradient,
.bg-dark-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Dark_RGBA), 1), rgba(var(--Dark-Ghost_RGBA), 1));
}

.bg-dark-f-gradient,
.bg-dark-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Soft_RGBA), 1), rgba(var(--Dark-Strong_RGBA), 1));
}

.bg-dark-g-gradient,
.bg-dark-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Ghost_RGBA), 1), rgba(var(--Dark-Dark_RGBA), 1));
}

/* Text Colors */

.text-transparent {
    color: var(--Transparent) !important;
}

.text-default,
.text-default-hover:hover {
    color: var(--Default) !important;
}

.text-default-l,
.text-default-l-hover:hover {
    color: var(--Default-Light) !important;
}

.text-default-s,
.text-default-s-hover:hover {
    color: var(--Default-Strong) !important;
}

.text-default-d,
.text-default-d-hover:hover {
    color: var(--Default-Dark) !important;
}

.text-default-f,
.text-default-f-hover:hover {
    color: var(--Default-Soft) !important;
}

.text-default-g,
.text-default-g-hover:hover {
    color: var(--Default-Ghost) !important;
}

.text-default-gradient,
.text-default-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default_RGBA), 1), rgba(var(--Default-Light_RGBA), 1), rgba(var(--Default_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-default-l-gradient,
.text-default-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Light_RGBA), 1), rgba(var(--Default_RGBA), 1), rgba(var(--Default-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-default-s-gradient,
.text-default-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Strong_RGBA), 1), rgba(var(--Default-Soft_RGBA), 1), rgba(var(--Default-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-default-d-gradient,
.text-default-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Dark_RGBA), 1), rgba(var(--Default-Ghost_RGBA), 1), rgba(var(--Default-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-default-f-gradient,
.text-default-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Soft_RGBA), 1), rgba(var(--Default-Strong_RGBA), 1), rgba(var(--Default-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-default-g-gradient,
.text-default-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Ghost_RGBA), 1), rgba(var(--Default-Dark_RGBA), 1), rgba(var(--Default-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-white,
.text-white-hover:hover {
    color: var(--White) !important;
}

.text-white-l,
.text-white-l-hover:hover {
    color: var(--White-Light) !important;
}

.text-white-s,
.text-white-s-hover:hover {
    color: var(--White-Strong) !important;
}

.text-white-d,
.text-white-d-hover:hover {
    color: var(--White-Dark) !important;
}

.text-white-f,
.text-white-f-hover:hover {
    color: var(--White-Soft) !important;
}

.text-white-g,
.text-white-g-hover:hover {
    color: var(--White-Ghost) !important;
}

.text-white-gradient,
.text-white-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White_RGBA), 1), rgba(var(--White-Light_RGBA), 1), rgba(var(--White_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-white-l-gradient,
.text-white-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Light_RGBA), 1), rgba(var(--White_RGBA), 1), rgba(var(--White-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-white-s-gradient,
.text-white-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Strong_RGBA), 1), rgba(var(--White-Soft_RGBA), 1), rgba(var(--White-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-white-d-gradient,
.text-white-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Dark_RGBA), 1), rgba(var(--White-Ghost_RGBA), 1), rgba(var(--White-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-white-f-gradient,
.text-white-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Soft_RGBA), 1), rgba(var(--White-Strong_RGBA), 1), rgba(var(--White-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-white-g-gradient,
.text-white-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Ghost_RGBA), 1), rgba(var(--White-Dark_RGBA), 1), rgba(var(--White-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-primary,
.text-primary-hover:hover {
    color: var(--Primary) !important;
}

.text-primary-l,
.text-primary-l-hover:hover {
    color: var(--Primary-Light) !important;
}

.text-primary-s,
.text-primary-s-hover:hover {
    color: var(--Primary-Strong) !important;
}

.text-primary-d,
.text-primary-d-hover:hover {
    color: var(--Primary-Dark) !important;
}

.text-primary-f,
.text-primary-f-hover:hover {
    color: var(--Primary-Soft) !important;
}

.text-primary-g,
.text-primary-g-hover:hover {
    color: var(--Primary-Ghost) !important;
}

.text-primary-gradient,
.text-primary-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary_RGBA), 1), rgba(var(--Primary-Light_RGBA), 1), rgba(var(--Primary_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-primary-l-gradient,
.text-primary-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Light_RGBA), 1), rgba(var(--Primary_RGBA), 1), rgba(var(--Primary-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-primary-s-gradient,
.text-primary-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Strong_RGBA), 1), rgba(var(--Primary-Soft_RGBA), 1), rgba(var(--Primary-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-primary-d-gradient,
.text-primary-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Dark_RGBA), 1), rgba(var(--Primary-Ghost_RGBA), 1), rgba(var(--Primary-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-primary-f-gradient,
.text-primary-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Soft_RGBA), 1), rgba(var(--Primary-Strong_RGBA), 1), rgba(var(--Primary-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-primary-g-gradient,
.text-primary-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Ghost_RGBA), 1), rgba(var(--Primary-Dark_RGBA), 1), rgba(var(--Primary-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-secondary,
.text-secondary-hover:hover {
    color: var(--Secondary) !important;
}

.text-secondary-l,
.text-secondary-l-hover:hover {
    color: var(--Secondary-Light) !important;
}

.text-secondary-s,
.text-secondary-s-hover:hover {
    color: var(--Secondary-Strong) !important;
}

.text-secondary-d,
.text-secondary-d-hover:hover {
    color: var(--Secondary-Dark) !important;
}

.text-secondary-f,
.text-secondary-f-hover:hover {
    color: var(--Secondary-Soft) !important;
}

.text-secondary-g,
.text-secondary-g-hover:hover {
    color: var(--Secondary-Ghost) !important;
}

.text-secondary-gradient,
.text-secondary-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary_RGBA), 1), rgba(var(--Secondary-Light_RGBA), 1), rgba(var(--Secondary_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-secondary-l-gradient,
.text-secondary-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Light_RGBA), 1), rgba(var(--Secondary_RGBA), 1), rgba(var(--Secondary-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-secondary-s-gradient,
.text-secondary-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Strong_RGBA), 1), rgba(var(--Secondary-Soft_RGBA), 1), rgba(var(--Secondary-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-secondary-d-gradient,
.text-secondary-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Dark_RGBA), 1), rgba(var(--Secondary-Ghost_RGBA), 1), rgba(var(--Secondary-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-secondary-f-gradient,
.text-secondary-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Soft_RGBA), 1), rgba(var(--Secondary-Strong_RGBA), 1), rgba(var(--Secondary-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-secondary-g-gradient,
.text-secondary-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Ghost_RGBA), 1), rgba(var(--Secondary-Dark_RGBA), 1), rgba(var(--Secondary-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-optional,
.text-optional-hover:hover {
    color: var(--Optional) !important;
}

.text-optional-l,
.text-optional-l-hover:hover {
    color: var(--Optional-Light) !important;
}

.text-optional-s,
.text-optional-s-hover:hover {
    color: var(--Optional-Strong) !important;
}

.text-optional-d,
.text-optional-d-hover:hover {
    color: var(--Optional-Dark) !important;
}

.text-optional-f,
.text-optional-f-hover:hover {
    color: var(--Optional-Soft) !important;
}

.text-optional-g,
.text-optional-g-hover:hover {
    color: var(--Optional-Ghost) !important;
}

.text-optional-gradient,
.text-optional-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional_RGBA), 1), rgba(var(--Optional-Light_RGBA), 1), rgba(var(--Optional_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-optional-l-gradient,
.text-optional-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Light_RGBA), 1), rgba(var(--Optional_RGBA), 1), rgba(var(--Optional-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-optional-s-gradient,
.text-optional-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Strong_RGBA), 1), rgba(var(--Optional-Soft_RGBA), 1), rgba(var(--Optional-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-optional-d-gradient,
.text-optional-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Dark_RGBA), 1), rgba(var(--Optional-Ghost_RGBA), 1), rgba(var(--Optional-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-optional-f-gradient,
.text-optional-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Soft_RGBA), 1), rgba(var(--Optional-Strong_RGBA), 1), rgba(var(--Optional-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-optional-g-gradient,
.text-optional-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Ghost_RGBA), 1), rgba(var(--Optional-Dark_RGBA), 1), rgba(var(--Optional-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-info,
.text-info-hover:hover {
    color: var(--Info) !important;
}

.text-info-l,
.text-info-l-hover:hover {
    color: var(--Info-Light) !important;
}

.text-info-s,
.text-info-s-hover:hover {
    color: var(--Info-Strong) !important;
}

.text-info-d,
.text-info-d-hover:hover {
    color: var(--Info-Dark) !important;
}

.text-info-f,
.text-info-f-hover:hover {
    color: var(--Info-Soft) !important;
}

.text-info-g,
.text-info-g-hover:hover {
    color: var(--Info-Ghost) !important;
}

.text-info-gradient,
.text-info-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info_RGBA), 1), rgba(var(--Info-Light_RGBA), 1), rgba(var(--Info_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-info-l-gradient,
.text-info-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Light_RGBA), 1), rgba(var(--Info_RGBA), 1), rgba(var(--Info-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-info-s-gradient,
.text-info-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Strong_RGBA), 1), rgba(var(--Info-Soft_RGBA), 1), rgba(var(--Info-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-info-d-gradient,
.text-info-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Dark_RGBA), 1), rgba(var(--Info-Ghost_RGBA), 1), rgba(var(--Info-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-info-f-gradient,
.text-info-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Soft_RGBA), 1), rgba(var(--Info-Strong_RGBA), 1), rgba(var(--Info-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-info-g-gradient,
.text-info-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Ghost_RGBA), 1), rgba(var(--Info-Dark_RGBA), 1), rgba(var(--Info-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-warning,
.text-warning-hover:hover {
    color: var(--Warning) !important;
}

.text-warning-l,
.text-warning-l-hover:hover {
    color: var(--Warning-Light) !important;
}

.text-warning-s,
.text-warning-s-hover:hover {
    color: var(--Warning-Strong) !important;
}

.text-warning-d,
.text-warning-d-hover:hover {
    color: var(--Warning-Dark) !important;
}

.text-warning-f,
.text-warning-f-hover:hover {
    color: var(--Warning-Soft) !important;
}

.text-warning-g,
.text-warning-g-hover:hover {
    color: var(--Warning-Ghost) !important;
}

.text-warning-gradient,
.text-warning-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning_RGBA), 1), rgba(var(--Warning-Light_RGBA), 1), rgba(var(--Warning_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-warning-l-gradient,
.text-warning-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Light_RGBA), 1), rgba(var(--Warning_RGBA), 1), rgba(var(--Warning-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-warning-s-gradient,
.text-warning-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Strong_RGBA), 1), rgba(var(--Warning-Soft_RGBA), 1), rgba(var(--Warning-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-warning-d-gradient,
.text-warning-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Dark_RGBA), 1), rgba(var(--Warning-Ghost_RGBA), 1), rgba(var(--Warning-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-warning-f-gradient,
.text-warning-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Soft_RGBA), 1), rgba(var(--Warning-Strong_RGBA), 1), rgba(var(--Warning-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-warning-g-gradient,
.text-warning-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Ghost_RGBA), 1), rgba(var(--Warning-Dark_RGBA), 1), rgba(var(--Warning-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-failed,
.text-failed-hover:hover {
    color: var(--Failed) !important;
}

.text-failed-l,
.text-failed-l-hover:hover {
    color: var(--Failed-Light) !important;
}

.text-failed-s,
.text-failed-s-hover:hover {
    color: var(--Failed-Strong) !important;
}

.text-failed-d,
.text-failed-d-hover:hover {
    color: var(--Failed-Dark) !important;
}

.text-failed-f,
.text-failed-f-hover:hover {
    color: var(--Failed-Soft) !important;
}

.text-failed-g,
.text-failed-g-hover:hover {
    color: var(--Failed-Ghost) !important;
}

.text-failed-gradient,
.text-failed-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed_RGBA), 1), rgba(var(--Failed-Light_RGBA), 1), rgba(var(--Failed_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-failed-l-gradient,
.text-failed-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Light_RGBA), 1), rgba(var(--Failed_RGBA), 1), rgba(var(--Failed-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-failed-s-gradient,
.text-failed-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Strong_RGBA), 1), rgba(var(--Failed-Soft_RGBA), 1), rgba(var(--Failed-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-failed-d-gradient,
.text-failed-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Dark_RGBA), 1), rgba(var(--Failed-Ghost_RGBA), 1), rgba(var(--Failed-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-failed-f-gradient,
.text-failed-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Soft_RGBA), 1), rgba(var(--Failed-Strong_RGBA), 1), rgba(var(--Failed-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-failed-g-gradient,
.text-failed-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Ghost_RGBA), 1), rgba(var(--Failed-Dark_RGBA), 1), rgba(var(--Failed-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-success,
.text-success-hover:hover {
    color: var(--Success) !important;
}

.text-success-l,
.text-success-l-hover:hover {
    color: var(--Success-Light) !important;
}

.text-success-s,
.text-success-s-hover:hover {
    color: var(--Success-Strong) !important;
}

.text-success-d,
.text-success-d-hover:hover {
    color: var(--Success-Dark) !important;
}

.text-success-f,
.text-success-f-hover:hover {
    color: var(--Success-Soft) !important;
}

.text-success-g,
.text-success-g-hover:hover {
    color: var(--Success-Ghost) !important;
}

.text-success-gradient,
.text-success-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success_RGBA), 1), rgba(var(--Success-Light_RGBA), 1), rgba(var(--Success_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-success-l-gradient,
.text-success-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Light_RGBA), 1), rgba(var(--Success_RGBA), 1), rgba(var(--Success-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-success-s-gradient,
.text-success-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Strong_RGBA), 1), rgba(var(--Success-Soft_RGBA), 1), rgba(var(--Success-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-success-d-gradient,
.text-success-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Dark_RGBA), 1), rgba(var(--Success-Ghost_RGBA), 1), rgba(var(--Success-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-success-f-gradient,
.text-success-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Soft_RGBA), 1), rgba(var(--Success-Strong_RGBA), 1), rgba(var(--Success-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-success-g-gradient,
.text-success-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Ghost_RGBA), 1), rgba(var(--Success-Dark_RGBA), 1), rgba(var(--Success-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-dark,
.text-dark-hover:hover {
    color: var(--Dark) !important;
}

.text-dark-l,
.text-dark-l-hover:hover {
    color: var(--Dark-Light) !important;
}

.text-dark-s,
.text-dark-s-hover:hover {
    color: var(--Dark-Strong) !important;
}

.text-dark-d,
.text-dark-d-hover:hover {
    color: var(--Dark-Dark) !important;
}

.text-dark-f,
.text-dark-f-hover:hover {
    color: var(--Dark-Soft) !important;
}

.text-dark-g,
.text-dark-g-hover:hover {
    color: var(--Dark-Ghost) !important;
}

.text-dark-gradient,
.text-dark-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark_RGBA), 1), rgba(var(--Dark-Light_RGBA), 1), rgba(var(--Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-dark-l-gradient,
.text-dark-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Light_RGBA), 1), rgba(var(--Dark_RGBA), 1), rgba(var(--Dark-Light_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-dark-s-gradient,
.text-dark-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Strong_RGBA), 1), rgba(var(--Dark-Soft_RGBA), 1), rgba(var(--Dark-Strong_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-dark-d-gradient,
.text-dark-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Dark_RGBA), 1), rgba(var(--Dark-Ghost_RGBA), 1), rgba(var(--Dark-Dark_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-dark-f-gradient,
.text-dark-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Soft_RGBA), 1), rgba(var(--Dark-Strong_RGBA), 1), rgba(var(--Dark-Soft_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

.text-dark-g-gradient,
.text-dark-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Ghost_RGBA), 1), rgba(var(--Dark-Dark_RGBA), 1), rgba(var(--Dark-Ghost_RGBA), 1));
    -webkit-background-clip: inherit;
    -moz-background-clip: inherit;
    background-clip: inherit;
    color: transparent;
}

/* Shadow Colors*/

.txt-shadow-default {
    text-shadow: 0.1rem 0.1rem rgba(var(--Default_RGBA), 0.2);
}
.txt-shadow-default-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Default_Light_RGBA), 0.2);
}
.txt-shadow-default-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Default_Soft_RGBA), 0.2);
}
.txt-shadow-default-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Default_Strong_RGBA), 0.2);
}
.txt-shadow-default-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Default_Dark_RGBA), 0.2);
}
.txt-shadow-primary {
    text-shadow: 0.1rem 0.1rem rgba(var(--Primary_RGBA), 0.2);
}
.txt-shadow-primary-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Primary_Light_RGBA), 0.2);
}
.txt-shadow-primary-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Primary_Soft_RGBA), 0.2);
}
.txt-shadow-primary-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Primary_Strong_RGBA), 0.2);
}
.txt-shadow-primary-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Primary_Dark_RGBA), 0.2);
}
.txt-shadow-secondary {
    text-shadow: 0.1rem 0.1rem rgba(var(--Secondary_RGBA), 0.2);
}
.txt-shadow-secondary-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Secondary_Light_RGBA), 0.2);
}
.txt-shadow-secondary-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Secondary_Soft_RGBA), 0.2);
}
.txt-shadow-secondary-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Secondary_Strong_RGBA), 0.2);
}
.txt-shadow-secondary-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Secondary_Dark_RGBA), 0.2);
}
.txt-shadow-info {
    text-shadow: 0.1rem 0.1rem rgba(var(--Info_RGBA), 0.2);
}
.txt-shadow-info-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Info_Light_RGBA), 0.2);
}
.txt-shadow-info-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Info_Soft_RGBA), 0.2);
}
.txt-shadow-info-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Info_Strong_RGBA), 0.2);
}
.txt-shadow-info-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Info_Dark_RGBA), 0.2);
}
.txt-shadow-optional {
    text-shadow: 0.1rem 0.1rem rgba(var(--Optional_RGBA), 0.2);
}
.txt-shadow-optional-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Optional_Light_RGBA), 0.2);
}
.txt-shadow-optional-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Optional_Soft_RGBA), 0.2);
}
.txt-shadow-optional-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Optional_Strong_RGBA), 0.2);
}
.txt-shadow-optional-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Optional_Dark_RGBA), 0.2);
}
.txt-shadow-failed {
    text-shadow: 0.1rem 0.1rem rgba(var(--Failed_RGBA), 0.2);
}
.txt-shadow-failed-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Failed_Light_RGBA), 0.2);
}
.txt-shadow-failed-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Failed_Soft_RGBA), 0.2);
}
.txt-shadow-failed-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Failed_Strong_RGBA), 0.2);
}
.txt-shadow-failed-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Failed_Dark_RGBA), 0.2);
}
.txt-shadow-warning {
    text-shadow: 0.1rem 0.1rem rgba(var(--Warning_RGBA), 0.2);
}
.txt-shadow-warning-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Warning_Light_RGBA), 0.2);
}
.txt-shadow-warning-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Warning_Soft_RGBA), 0.2);
}
.txt-shadow-warning-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Warning_Strong_RGBA), 0.2);
}
.txt-shadow-warning-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Warning_Dark_RGBA), 0.2);
}
.txt-shadow-dark {
    text-shadow: 0.1rem 0.1rem rgba(var(--Dark_RGBA), 0.2);
}
.txt-shadow-dark-l {
    text-shadow: 0.1rem 0.1rem rgba(var(--Dark_Light_RGBA), 0.2);
}
.txt-shadow-dark-f {
    text-shadow: 0.1rem 0.1rem rgba(var(--Dark_Soft_RGBA), 0.2);
}
.txt-shadow-dark-s {
    text-shadow: 0.1rem 0.1rem rgba(var(--Dark_Strong_RGBA), 0.2);
}
.txt-shadow-dark-d {
    text-shadow: 0.1rem 0.1rem rgba(var(--Dark_Dark_RGBA), 0.2);
}

/* Border Colors */

.border-transparent {
    border-color: var(--Transparent) !important;
}

.border-default,
.border-default-hover:hover,
.border-default-after::after,
.border-default-before::before {
    border-color: var(--Default) !important;
}

.border-default-l,
.border-default-l-hover:hover,
.border-default-l-after::after,
.border-default-l-before::before {
    border-color: var(--Default-Light) !important;
}

.border-default-s,
.border-default-s-hover:hover,
.border-default-s-after::after,
.border-default-s-before::before {
    border-color: var(--Default-Strong) !important;
}

.border-default-d,
.border-default-d-hover:hover,
.border-default-d-after::after,
.border-default-d-before::before {
    border-color: var(--Default-Dark) !important;
}

.border-default-f,
.border-default-f-hover:hover,
.border-default-f-after::after,
.border-default-f-before::before {
    border-color: var(--Default-Soft) !important;
}

.border-default-g,
.border-default-g-hover:hover,
.border-default-g-after::after,
.border-default-g-before::before {
    border-color: var(--Default-Ghost) !important;
}

.border-default-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Default_RGBA), 1), rgba(var(--Default-Light_RGBA), 1));
}
.border-default-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Default-Light_RGBA), 1), rgba(var(--Default_RGBA), 1));
}
.border-default-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Default-Strong_RGBA), 1), rgba(var(--Default-Soft_RGBA), 1));
}
.border-default-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Default-Dark_RGBA), 1), rgba(var(--Default-Ghost_RGBA), 1));
}
.border-default-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Default-Soft_RGBA), 1), rgba(var(--Default-Strong_RGBA), 1));
}
.border-default-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Default-Ghost_RGBA), 1), rgba(var(--Default-Dark_RGBA), 1));
}

.border-white-hover:hover {
    border-color: var(--White) !important;
}

.border-white-l,
.border-white-l-hover:hover,
.border-white-l-after::after,
.border-white-l-before::before {
    border-color: var(--White-Light) !important;
}

.border-white-s,
.border-white-s-hover:hover,
.border-white-s-after::after,
.border-white-s-before::before {
    border-color: var(--White-Strong) !important;
}

.border-white-d,
.border-white-d-hover:hover,
.border-white-d-after::after,
.border-white-d-before::before {
    border-color: var(--White-Dark) !important;
}

.border-white-f,
.border-white-f-hover:hover,
.border-white-f-after::after,
.border-white-f-before::before {
    border-color: var(--White-Soft) !important;
}

.border-white-g,
.border-white-g-hover:hover,
.border-white-g-after::after,
.border-white-g-before::before {
    border-color: var(--White-Ghost) !important;
}

.border-white-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--White_RGBA), 1), rgba(var(--White-Light_RGBA), 1));
}
.border-white-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--White-Light_RGBA), 1), rgba(var(--White_RGBA), 1));
}
.border-white-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--White-Strong_RGBA), 1), rgba(var(--White-Soft_RGBA), 1));
}
.border-white-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--White-Dark_RGBA), 1), rgba(var(--White-Ghost_RGBA), 1));
}
.border-white-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--White-Soft_RGBA), 1), rgba(var(--White-Strong_RGBA), 1));
}
.border-white-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--White-Ghost_RGBA), 1), rgba(var(--White-Dark_RGBA), 1));
}

.border-primary,
.border-primary-hover:hover,
.border-primary-after::after,
.border-primary-before::before {
    border-color: var(--Primary) !important;
}

.border-primary-l,
.border-primary-l-hover:hover,
.border-primary-l-after::after,
.border-primary-l-before::before {
    border-color: var(--Primary-Light) !important;
}

.border-primary-s,
.border-primary-s-hover:hover,
.border-primary-s-after::after,
.border-primary-s-before::before {
    border-color: var(--Primary-Strong) !important;
}

.border-primary-d,
.border-primary-d-hover:hover,
.border-primary-d-after::after,
.border-primary-d-before::before {
    border-color: var(--Primary-Dark) !important;
}

.border-primary-f,
.border-primary-f-hover:hover,
.border-primary-f-after:after,
.border-primary-f-before:before {
    border-color: var(--Primary-Soft) !important;
}

.border-primary-g,
.border-primary-g-hover:hover,
.border-primary-g-after::after,
.border-primary-g-before::before {
    border-color: var(--Primary-Ghost) !important;
}

.border-primary-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Primary_RGBA), 1), rgba(var(--Primary-Light_RGBA), 1));
}
.border-primary-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Primary-Light_RGBA), 1), rgba(var(--Primary_RGBA), 1));
}
.border-primary-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Primary-Strong_RGBA), 1), rgba(var(--Primary-Soft_RGBA), 1));
}
.border-primary-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Primary-Dark_RGBA), 1), rgba(var(--Primary-Ghost_RGBA), 1));
}
.border-primary-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Primary-Soft_RGBA), 1), rgba(var(--Primary-Strong_RGBA), 1));
}
.border-primary-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Primary-Ghost_RGBA), 1), rgba(var(--Primary-Dark_RGBA), 1));
}

.border-secondary,
.border-secondary-hover:hover,
.border-secondary-after::after,
.border-secondary-before::before {
    border-color: var(--Secondary) !important;
}

.border-secondary-l,
.border-secondary-l-hover:hover,
.border-secondary-l-after::after,
.border-secondary-l-before::before {
    border-color: var(--Secondary-Light) !important;
}

.border-secondary-s,
.border-secondary-s-hover:hover,
.border-secondary-s-after::after,
.border-secondary-s-before::before {
    border-color: var(--Secondary-Strong) !important;
}

.border-secondary-d,
.border-secondary-d-hover:hover,
.border-secondary-d-after::after,
.border-secondary-d-before::before {
    border-color: var(--Secondary-Dark) !important;
}

.border-secondary-f,
.border-secondary-f-hover:hover,
.border-secondary-f-after::after,
.border-secondary-f-before::before {
    border-color: var(--Secondary-Soft) !important;
}

.border-secondary-g,
.border-secondary-g-hover:hover,
.border-secondary-g-after::after,
.border-secondary-g-before::before {
    border-color: var(--Secondary-Ghost) !important;
}

.border-secondary-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Secondary_RGBA), 1), rgba(var(--Secondary-Light_RGBA), 1));
}
.border-secondary-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Secondary-Light_RGBA), 1), rgba(var(--Secondary_RGBA), 1));
}
.border-secondary-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Secondary-Strong_RGBA), 1), rgba(var(--Secondary-Soft_RGBA), 1));
}
.border-secondary-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Secondary-Dark_RGBA), 1), rgba(var(--Secondary-Ghost_RGBA), 1));
}
.border-secondary-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Secondary-Soft_RGBA), 1), rgba(var(--Secondary-Strong_RGBA), 1));
}
.border-secondary-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Secondary-Ghost_RGBA), 1), rgba(var(--Secondary-Dark_RGBA), 1));
}

.border-optional,
.border-optional-hover:hover,
.border-optional-after::after,
.border-optional-before::before {
    border-color: var(--Optional) !important;
}

.border-optional-l,
.border-optional-l-hover:hover,
.border-optional-l-after::after,
.border-optional-l-before::before {
    border-color: var(--Optional-Light) !important;
}

.border-optional-s,
.border-optional-s-hover:hover,
.border-optional-s-after::after,
.border-optional-s-before::before {
    border-color: var(--Optional-Strong) !important;
}

.border-optional-d,
.border-optional-d-hover:hover,
.border-optional-d-after::after,
.border-optional-d-before::before {
    border-color: var(--Optional-Dark) !important;
}

.border-optional-f,
.border-optional-f-hover:hover,
.border-optional-f-after::after,
.border-optional-f-before::before {
    border-color: var(--Optional-Soft) !important;
}

.border-optional-g,
.border-optional-g-hover:hover,
.border-optional-g-after::after,
.border-optional-g-before::before {
    border-color: var(--Optional-Ghost) !important;
}

.border-optional-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Optional_RGBA), 1), rgba(var(--Optional-Light_RGBA), 1));
}
.border-optional-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Optional-Light_RGBA), 1), rgba(var(--Optional_RGBA), 1));
}
.border-optional-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Optional-Strong_RGBA), 1), rgba(var(--Optional-Soft_RGBA), 1));
}
.border-optional-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Optional-Dark_RGBA), 1), rgba(var(--Optional-Ghost_RGBA), 1));
}
.border-optional-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Optional-Soft_RGBA), 1), rgba(var(--Optional-Strong_RGBA), 1));
}
.border-optional-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Optional-Ghost_RGBA), 1), rgba(var(--Optional-Dark_RGBA), 1));
}

.border-info,
.border-info-hover:hover,
.border-info-after::after,
.border-info-before::before {
    border-color: var(--Info) !important;
}

.border-info-l,
.border-info-l-hover:hover,
.border-info-l-after::after,
.border-info-l-before::before {
    border-color: var(--Info-Light) !important;
}

.border-info-s,
.border-info-s-hover:hover,
.border-info-s-after::after,
.border-info-s-before::before {
    border-color: var(--Info-Strong) !important;
}

.border-info-d,
.border-info-d-hover:hover,
.border-info-d-after::after,
.border-info-d-before::before {
    border-color: var(--Info-Dark) !important;
}

.border-info-f,
.border-info-f-hover:hover,
.border-info-f-after::after,
.border-info-f-before::before {
    border-color: var(--Info-Soft) !important;
}

.border-info-g,
.border-info-g-hover:hover,
.border-info-g-after::after,
.border-info-g-before::before {
    border-color: var(--Info-Ghost) !important;
}

.border-info-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Info_RGBA), 1), rgba(var(--Info-Light_RGBA), 1));
}
.border-info-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Info-Light_RGBA), 1), rgba(var(--Info_RGBA), 1));
}
.border-info-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Info-Strong_RGBA), 1), rgba(var(--Info-Soft_RGBA), 1));
}
.border-info-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Info-Dark_RGBA), 1), rgba(var(--Info-Ghost_RGBA), 1));
}
.border-info-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Info-Soft_RGBA), 1), rgba(var(--Info-Strong_RGBA), 1));
}
.border-info-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Info-Ghost_RGBA), 1), rgba(var(--Info-Dark_RGBA), 1));
}

.border-warning,
.border-warning-hover:hover,
.border-warning-after::after,
.border-warning-before::before {
    border-color: var(--Warning) !important;
}

.border-warning-l,
.border-warning-l-hover:hover,
.border-warning-l-after::after,
.border-warning-l-before::before {
    border-color: var(--Warning-Light) !important;
}

.border-warning-s,
.border-warning-s-hover:hover,
.border-warning-s-after::after,
.border-warning-s-before::before {
    border-color: var(--Warning-Strong) !important;
}

.border-warning-d,
.border-warning-d-hover:hover,
.border-warning-d-after::after,
.border-warning-d-before::before {
    border-color: var(--Warning-Dark) !important;
}

.border-warning-f,
.border-warning-f-hover:hover,
.border-warning-f-after::after,
.border-warning-f-before::before {
    border-color: var(--Warning-Soft) !important;
}

.border-warning-g,
.border-warning-g-hover:hover,
.border-warning-g-after::after,
.border-warning-g-before::before {
    border-color: var(--Warning-Ghost) !important;
}

.border-warning-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Warning_RGBA), 1), rgba(var(--Warning-Light_RGBA), 1));
}
.border-warning-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Warning-Light_RGBA), 1), rgba(var(--Warning_RGBA), 1));
}
.border-warning-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Warning-Strong_RGBA), 1), rgba(var(--Warning-Soft_RGBA), 1));
}
.border-warning-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Warning-Dark_RGBA), 1), rgba(var(--Warning-Ghost_RGBA), 1));
}
.border-warning-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Warning-Soft_RGBA), 1), rgba(var(--Warning-Strong_RGBA), 1));
}
.border-warning-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Warning-Ghost_RGBA), 1), rgba(var(--Warning-Dark_RGBA), 1));
}

.border-failed,
.border-failed-hover:hover,
.border-failed-after::after,
.border-failed-before::before {
    border-color: var(--Failed) !important;
}

.border-failed-l,
.border-failed-l-hover:hover,
.border-failed-l-after::after,
.border-failed-l-before::before {
    border-color: var(--Failed-Light) !important;
}

.border-failed-s,
.border-failed-s-hover:hover,
.border-failed-s-after::after,
.border-failed-s-before::before {
    border-color: var(--Failed-Strong) !important;
}

.border-failed-d,
.border-failed-d-hover:hover,
.border-failed-d-after::after,
.border-failed-d-before::before {
    border-color: var(--Failed-Dark) !important;
}

.border-failed-f,
.border-failed-f-hover:hover,
.border-failed-f-after::after,
.border-failed-f-before::before {
    border-color: var(--Failed-Soft) !important;
}

.border-failed-g,
.border-failed-g-hover:hover,
.border-failed-g-after::after,
.border-failed-g-before::before {
    border-color: var(--Failed-Ghost) !important;
}

.border-failed-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Failed_RGBA), 1), rgba(var(--Failed-Light_RGBA), 1));
}
.border-failed-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Failed-Light_RGBA), 1), rgba(var(--Failed_RGBA), 1));
}
.border-failed-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Failed-Strong_RGBA), 1), rgba(var(--Failed-Soft_RGBA), 1));
}
.border-failed-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Failed-Dark_RGBA), 1), rgba(var(--Failed-Ghost_RGBA), 1));
}
.border-failed-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Failed-Soft_RGBA), 1), rgba(var(--Failed-Strong_RGBA), 1));
}
.border-failed-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Failed-Ghost_RGBA), 1), rgba(var(--Failed-Dark_RGBA), 1));
}

.border-success,
.border-success-hover:hover,
.border-success-after::after,
.border-success-before::before {
    border-color: var(--Success) !important;
}

.border-success-l,
.border-success-l-hover:hover,
.border-success-l-after::after,
.border-success-l-before::before {
    border-color: var(--Success-Light) !important;
}

.border-success-s,
.border-success-s-hover:hover,
.border-success-s-after::after,
.border-success-s-before::before {
    border-color: var(--Success-Strong) !important;
}

.border-success-d,
.border-success-d-hover:hover,
.border-success-d-after::after,
.border-success-d-before::before {
    border-color: var(--Success-Dark) !important;
}

.border-success-f,
.border-success-f-hover:hover,
.border-success-f-after::after,
.border-success-f-before::before {
    border-color: var(--Success-Soft) !important;
}

.border-success-g,
.border-success-g-hover:hover,
.border-success-g-after::after,
.border-success-g-before::before {
    border-color: var(--Success-Ghost) !important;
}

.border-success-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Success_RGBA), 1), rgba(var(--Success-Light_RGBA), 1));
}
.border-success-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Success-Light_RGBA), 1), rgba(var(--Success_RGBA), 1));
}
.border-success-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Success-Strong_RGBA), 1), rgba(var(--Success-Soft_RGBA), 1));
}
.border-success-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Success-Dark_RGBA), 1), rgba(var(--Success-Ghost_RGBA), 1));
}
.border-success-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Success-Soft_RGBA), 1), rgba(var(--Success-Strong_RGBA), 1));
}
.border-success-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Success-Ghost_RGBA), 1), rgba(var(--Success-Dark_RGBA), 1));
}

.border-dark,
.border-dark-hover:hover,
.border-dark-after::after,
.border-dark-before::before {
    border-color: var(--Dark) !important;
}

.border-dark-l,
.border-dark-l-hover:hover,
.border-dark-l-after::after,
.border-dark-l-before::before {
    border-color: var(--Dark-Light) !important;
}

.border-dark-s,
.border-dark-s-hover:hover,
.border-dark-s-after::after,
.border-dark-s-before::before {
    border-color: var(--Dark-Strong) !important;
}

.border-dark-d,
.border-dark-d-hover:hover,
.border-dark-d-after::after,
.border-dark-d-before::before {
    border-color: var(--Dark-Dark) !important;
}

.border-dark-f,
.border-dark-f-hover:hover,
.border-dark-f-after::after,
.border-dark-f-before::before {
    border-color: var(--Dark-Soft) !important;
}

.border-dark-g,
.border-dark-g-hover:hover,
.border-dark-g-after::after,
.border-dark-g-before::before {
    border-color: var(--Dark-Ghost) !important;
}

.border-dark-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Dark_RGBA), 1), rgba(var(--Dark-Light_RGBA), 1));
}
.border-dark-l-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Dark-Light_RGBA), 1), rgba(var(--Dark_RGBA), 1));
}
.border-dark-s-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Dark-Strong_RGBA), 1), rgba(var(--Dark-Soft_RGBA), 1));
}
.border-dark-d-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Dark-Dark_RGBA), 1), rgba(var(--Dark-Ghost_RGBA), 1));
}
.border-dark-f-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Dark-Soft_RGBA), 1), rgba(var(--Dark-Strong_RGBA), 1));
}
.border-dark-g-gradient {
    border-image-source: linear-gradient(to left, rgba(var(--Dark-Ghost_RGBA), 1), rgba(var(--Dark-Dark_RGBA), 1));
}

/*********Buttons************/

.btn-default {
    color: var(--Dark);
    background-color: var(--Default);
    border-color: var(--Default);
}
.btn-default:hover {
    color: var(--Dark);
    background-color: var(--Default-Light);
    border-color: var(--Default-Light);
}
.btn-default-l {
    color: var(--Dark);
    background-color: var(--Default-Light);
    border-color: var(--Default-Light);
}
.btn-default-l:hover {
    color: var(--Dark);
    background-color: var(--Default-Strong);
    border-color: var(--Default-Strong);
}
.btn-default-s {
    color: var(--Dark);
    background-color: var(--Default-Strong);
    border-color: var(--Default-Strong);
}
.btn-default-s:hover {
    color: var(--Dark);
    background-color: var(--Default-Dark);
    border-color: var(--Default-Dark);
}
.btn-default-d {
    color: var(--Dark);
    background-color: var(--Default-Dark);
    border-color: var(--Default-Dark);
}
.btn-default-d:hover {
    color: var(--Dark);
    background-color: var(--Default-Soft);
    border-color: var(--Default-Soft);
}
.btn-default-f {
    color: var(--Dark);
    background-color: var(--Default-Soft);
    border-color: var(--Default-Soft);
}
.btn-default-f:hover {
    color: var(--Dark);
    background-color: var(--Default-Ghost);
    border-color: var(--Default-Ghost);
}
.btn-default-g {
    color: var(--Dark);
    background-color: var(--Default-Ghost);
    border-color: var(--Default-Ghost);
}
.btn-default-g:hover {
    color: var(--Dark-Ghost);
    background-color: var(--Default);
    border-color: var(--Default-Ghost);
}
.btn-default:disabled,
.btn-default.disabled {
    color: var(--Dark-Light);
    background-color: var(--Default-Light);
    border-color: var(--Default-Light);
}
.btn-default:active,
.btn-default.active {
    color: var(--Dark-Dark);
    background-color: var(--Default-Light);
    border-color: var(--Default-Light);
}
.btn-default:active:focus,
.btn-default.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-default-gradient,
.btn-default-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default_RGBA), 1), rgba(var(--Default-Light_RGBA), 1));
}
.btn-default-l-gradient,
.btn-default-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Light_RGBA), 1), rgba(var(--Default_RGBA), 1));
}
.btn-default-s-gradient,
.btn-default-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Strong_RGBA), 1), rgba(var(--Default-Soft_RGBA), 1));
}
.btn-default-d-gradient,
.btn-default-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Dark_RGBA), 1), rgba(var(--Default-Ghost_RGBA), 1));
}
.btn-default-f-gradient,
.btn-default-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Soft_RGBA), 1), rgba(var(--Default-Strong_RGBA), 1));
}
.btn-default-g-gradient,
.btn-default-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Default-Ghost_RGBA), 1), rgba(var(--Default-Dark_RGBA), 1));
}

.btn-white {
    color: var(--Dark);
    background-color: var(--White);
    border-color: var(--White);
}
.btn-white:hover {
    color: var(--Dark);
    background-color: var(--White-Light);
    border-color: var(--White-Light);
}
.btn-white-l {
    color: var(--Dark);
    background-color: var(--White-Light);
    border-color: var(--White-Light);
}
.btn-white-l:hover {
    color: var(--Dark);
    background-color: var(--White-Strong);
    border-color: var(--White-Strong);
}
.btn-white-s {
    color: var(--Dark);
    background-color: var(--White-Strong);
    border-color: var(--White-Strong);
}
.btn-white-s:hover {
    color: var(--Dark);
    background-color: var(--White-Dark);
    border-color: var(--White-Dark);
}
.btn-white-d {
    color: var(--Dark);
    background-color: var(--White-Dark);
    border-color: var(--White-Dark);
}
.btn-white-d:hover {
    color: var(--Dark);
    background-color: var(--White-Soft);
    border-color: var(--White-Soft);
}
.btn-white-f {
    color: var(--Dark);
    background-color: var(--White-Soft);
    border-color: var(--White-Soft);
}
.btn-white-f:hover {
    color: var(--Dark);
    background-color: var(--White-Ghost);
    border-color: var(--White-Ghost);
}
.btn-white-g {
    color: var(--Dark);
    background-color: var(--White-Ghost);
    border-color: var(--White-Ghost);
}
.btn-white-g:hover {
    color: var(--Dark-Ghost);
    background-color: var(--White);
    border-color: var(--White-Ghost);
}
.btn-white:disabled,
.btn-white.disabled {
    color: var(--Dark-Light);
    background-color: var(--White-Light);
    border-color: var(--White-Light);
}
.btn-white:active,
.btn-white.active {
    color: var(--Dark-Dark);
    background-color: var(--White-Light);
    border-color: var(--White-Light);
}
.btn-white:active:focus,
.btn-white.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-white-gradient,
.btn-white-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White_RGBA), 1), rgba(var(--White-Light_RGBA), 1));
}
.btn-white-l-gradient,
.btn-white-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Light_RGBA), 1), rgba(var(--White_RGBA), 1));
}
.btn-white-s-gradient,
.btn-white-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Strong_RGBA), 1), rgba(var(--White-Soft_RGBA), 1));
}
.btn-white-d-gradient,
.btn-white-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Dark_RGBA), 1), rgba(var(--White-Ghost_RGBA), 1));
}
.btn-white-f-gradient,
.btn-white-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Soft_RGBA), 1), rgba(var(--White-Strong_RGBA), 1));
}
.btn-white-g-gradient,
.btn-white-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--White-Ghost_RGBA), 1), rgba(var(--White-Dark_RGBA), 1));
}

.btn-primary {
    color: var(--White);
    background-color: var(--Primary);
    border-color: var(--Primary);
}
.btn-primary:hover {
    color: var(--White);
    background-color: var(--Primary-Light);
    border-color: var(--Primary-Light);
}
.btn-primary-l {
    color: var(--White);
    background-color: var(--Primary-Light);
    border-color: var(--Primary-Light);
}
.btn-primary-l:hover {
    color: var(--White);
    background-color: var(--Primary-Strong);
    border-color: var(--Primary-Strong);
}
.btn-primary-s {
    color: var(--White);
    background-color: var(--Primary-Strong);
    border-color: var(--Primary-Strong);
}
.btn-primary-s:hover {
    color: var(--White);
    background-color: var(--Primary-Dark);
    border-color: var(--Primary-Dark);
}
.btn-primary-d {
    color: var(--White);
    background-color: var(--Primary-Dark);
    border-color: var(--Primary-Dark);
}
.btn-primary-d:hover {
    color: var(--White);
    background-color: var(--Primary-Soft);
    border-color: var(--Primary-Soft);
}
.btn-primary-f {
    color: var(--White);
    background-color: var(--Primary-Soft);
    border-color: var(--Primary-Soft);
}
.btn-primary-f:hover {
    color: var(--White);
    background-color: var(--Primary-Ghost);
    border-color: var(--Primary-Ghost);
}
.btn-primary-g {
    color: var(--White);
    background-color: var(--Primary-Ghost);
    border-color: var(--Primary-Ghost);
}
.btn-primary-g:hover {
    color: var(--Primary-Ghost);
    background-color: var(--White);
    border-color: var(--Primary-Ghost);
}
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--White-Light);
    background-color: var(--Primary-Light);
    border-color: var(--Primary-Light);
}
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: var(--Primary-Light);
    border-color: var(--Primary-Light);
}
.btn-primary:active:focus,
.btn-primary.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary-gradient,
.btn-primary-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary_RGBA), 1), rgba(var(--Primary-Light_RGBA), 1));
}
.btn-primary-l-gradient,
.btn-primary-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Light_RGBA), 1), rgba(var(--Primary_RGBA), 1));
}
.btn-primary-s-gradient,
.btn-primary-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Strong_RGBA), 1), rgba(var(--Primary-Soft_RGBA), 1));
}
.btn-primary-d-gradient,
.btn-primary-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Dark_RGBA), 1), rgba(var(--Primary-Ghost_RGBA), 1));
}
.btn-primary-f-gradient,
.btn-primary-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Soft_RGBA), 1), rgba(var(--Primary-Strong_RGBA), 1));
}
.btn-primary-g-gradient,
.btn-primary-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Primary-Ghost_RGBA), 1), rgba(var(--Primary-Dark_RGBA), 1));
}

.btn-secondary {
    color: var(--White);
    background-color: var(--Secondary);
    border-color: var(--Secondary);
}
.btn-secondary:hover {
    color: var(--White);
    background-color: var(--Secondary-Light);
    border-color: var(--Secondary-Light);
}
.btn-secondary-l {
    color: var(--White);
    background-color: var(--Secondary-Light);
    border-color: var(--Secondary-Light);
}
.btn-secondary-l:hover {
    color: var(--White);
    background-color: var(--Secondary-Strong);
    border-color: var(--Secondary-Strong);
}
.btn-secondary-s {
    color: var(--White);
    background-color: var(--Secondary-Strong);
    border-color: var(--Secondary-Strong);
}
.btn-secondary-s:hover {
    color: var(--White);
    background-color: var(--Secondary-Dark);
    border-color: var(--Secondary-Dark);
}
.btn-secondary-d {
    color: var(--White);
    background-color: var(--Secondary-Dark);
    border-color: var(--Secondary-Dark);
}
.btn-secondary-d:hover {
    color: var(--White);
    background-color: var(--Secondary-Soft);
    border-color: var(--Secondary-Soft);
}
.btn-secondary-f {
    color: var(--White);
    background-color: var(--Secondary-Soft);
    border-color: var(--Secondary-Soft);
}
.btn-secondary-f:hover {
    color: var(--White);
    background-color: var(--Secondary-Ghost);
    border-color: var(--Secondary-Ghost);
}
.btn-secondary-g {
    color: var(--White);
    background-color: var(--Secondary-Ghost);
    border-color: var(--Secondary-Ghost);
}
.btn-secondary-g:hover {
    color: var(--Secondary-Ghost);
    background-color: var(--White);
    border-color: var(--Secondary-Ghost);
}
.btn-secondary:disabled,
.btn-secondary.disabled {
    color: var(--White-Light);
    background-color: var(--Secondary-Light);
    border-color: var(--Secondary-Light);
}
.btn-secondary:active,
.btn-secondary.active {
    color: #fff;
    background-color: var(--Secondary-Light);
    border-color: var(--Secondary-Light);
}
.btn-secondary:active:focus,
.btn-secondary.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-secondary-gradient,
.btn-secondary-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary_RGBA), 1), rgba(var(--Secondary-Light_RGBA), 1));
}
.btn-secondary-l-gradient,
.btn-secondary-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Light_RGBA), 1), rgba(var(--Secondary_RGBA), 1));
}
.btn-secondary-s-gradient,
.btn-secondary-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Strong_RGBA), 1), rgba(var(--Secondary-Soft_RGBA), 1));
}
.btn-secondary-d-gradient,
.btn-secondary-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Dark_RGBA), 1), rgba(var(--Secondary-Ghost_RGBA), 1));
}
.btn-secondary-f-gradient,
.btn-secondary-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Soft_RGBA), 1), rgba(var(--Secondary-Strong_RGBA), 1));
}
.btn-secondary-g-gradient,
.btn-secondary-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Secondary-Ghost_RGBA), 1), rgba(var(--Secondary-Dark_RGBA), 1));
}

.btn-optional {
    color: var(--White);
    background-color: var(--Optional);
    border-color: var(--Optional);
}
.btn-optional:hover {
    color: var(--White);
    background-color: var(--Optional-Light);
    border-color: var(--Optional-Light);
}
.btn-optional-l {
    color: var(--White);
    background-color: var(--Optional-Light);
    border-color: var(--Optional-Light);
}
.btn-optional-l:hover {
    color: var(--White);
    background-color: var(--Optional-Strong);
    border-color: var(--Optional-Strong);
}
.btn-optional-s {
    color: var(--White);
    background-color: var(--Optional-Strong);
    border-color: var(--Optional-Strong);
}
.btn-optional-s:hover {
    color: var(--White);
    background-color: var(--Optional-Dark);
    border-color: var(--Optional-Dark);
}
.btn-optional-d {
    color: var(--White);
    background-color: var(--Optional-Dark);
    border-color: var(--Optional-Dark);
}
.btn-optional-d:hover {
    color: var(--White);
    background-color: var(--Optional-Soft);
    border-color: var(--Optional-Soft);
}
.btn-optional-f {
    color: var(--White);
    background-color: var(--Optional-Soft);
    border-color: var(--Optional-Soft);
}
.btn-optional-f:hover {
    color: var(--White);
    background-color: var(--Optional-Ghost);
    border-color: var(--Optional-Ghost);
}
.btn-optional-g {
    color: var(--White);
    background-color: var(--Optional-Ghost);
    border-color: var(--Optional-Ghost);
}
.btn-optional-g:hover {
    color: var(--Optional-Ghost);
    background-color: var(--White);
    border-color: var(--Optional-Ghost);
}
.btn-optional:disabled,
.btn-optional.disabled {
    color: var(--White-Light);
    background-color: var(--Optional-Light);
    border-color: var(--Optional-Light);
}
.btn-optional:active,
.btn-optional.active {
    color: #fff;
    background-color: var(--Optional-Light);
    border-color: var(--Optional-Light);
}
.btn-optional:active:focus,
.btn-optional.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-optional-gradient,
.btn-optional-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional_RGBA), 1), rgba(var(--Optional-Light_RGBA), 1));
}
.btn-optional-l-gradient,
.btn-optional-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Light_RGBA), 1), rgba(var(--Optional_RGBA), 1));
}
.btn-optional-s-gradient,
.btn-optional-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Strong_RGBA), 1), rgba(var(--Optional-Soft_RGBA), 1));
}
.btn-optional-d-gradient,
.btn-optional-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Dark_RGBA), 1), rgba(var(--Optional-Ghost_RGBA), 1));
}
.btn-optional-f-gradient,
.btn-optional-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Soft_RGBA), 1), rgba(var(--Optional-Strong_RGBA), 1));
}
.btn-optional-g-gradient,
.btn-optional-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Optional-Ghost_RGBA), 1), rgba(var(--Optional-Dark_RGBA), 1));
}

.btn-info {
    color: var(--White);
    background-color: var(--Info);
    border-color: var(--Info);
}
.btn-info:hover {
    color: var(--White);
    background-color: var(--Info-Light);
    border-color: var(--Info-Light);
}
.btn-info-l {
    color: var(--White);
    background-color: var(--Info-Light);
    border-color: var(--Info-Light);
}
.btn-info-l:hover {
    color: var(--White);
    background-color: var(--Info-Strong);
    border-color: var(--Info-Strong);
}
.btn-info-s {
    color: var(--White);
    background-color: var(--Info-Strong);
    border-color: var(--Info-Strong);
}
.btn-info-s:hover {
    color: var(--White);
    background-color: var(--Info-Dark);
    border-color: var(--Info-Dark);
}
.btn-info-d {
    color: var(--White);
    background-color: var(--Info-Dark);
    border-color: var(--Info-Dark);
}
.btn-info-d:hover {
    color: var(--White);
    background-color: var(--Info-Soft);
    border-color: var(--Info-Soft);
}
.btn-info-f {
    color: var(--White);
    background-color: var(--Info-Soft);
    border-color: var(--Info-Soft);
}
.btn-info-f:hover {
    color: var(--White);
    background-color: var(--Info-Ghost);
    border-color: var(--Info-Ghost);
}
.btn-info-g {
    color: var(--White);
    background-color: var(--Info-Ghost);
    border-color: var(--Info-Ghost);
}
.btn-info-g:hover {
    color: var(--Info-Ghost);
    background-color: var(--White);
    border-color: var(--Info-Ghost);
}
.btn-info:disabled,
.btn-info.disabled {
    color: var(--White-Light);
    background-color: var(--Info-Light);
    border-color: var(--Info-Light);
}
.btn-info:active,
.btn-info.active {
    color: #fff;
    background-color: var(--Info-Light);
    border-color: var(--Info-Light);
}
.btn-info:active:focus,
.btn-info.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-info-gradient,
.btn-info-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info_RGBA), 1), rgba(var(--Info-Light_RGBA), 1));
}
.btn-info-l-gradient,
.btn-info-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Light_RGBA), 1), rgba(var(--Info_RGBA), 1));
}
.btn-info-s-gradient,
.btn-info-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Strong_RGBA), 1), rgba(var(--Info-Soft_RGBA), 1));
}
.btn-info-d-gradient,
.btn-info-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Dark_RGBA), 1), rgba(var(--Info-Ghost_RGBA), 1));
}
.btn-info-f-gradient,
.btn-info-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Soft_RGBA), 1), rgba(var(--Info-Strong_RGBA), 1));
}
.btn-info-g-gradient,
.btn-info-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Info-Ghost_RGBA), 1), rgba(var(--Info-Dark_RGBA), 1));
}

.btn-warning {
    color: var(--White);
    background-color: var(--Warning);
    border-color: var(--Warning);
}
.btn-warning:hover {
    color: var(--White);
    background-color: var(--Warning-Light);
    border-color: var(--Warning-Light);
}
.btn-warning-l {
    color: var(--White);
    background-color: var(--Warning-Light);
    border-color: var(--Warning-Light);
}
.btn-warning-l:hover {
    color: var(--White);
    background-color: var(--Warning-Strong);
    border-color: var(--Warning-Strong);
}
.btn-warning-s {
    color: var(--White);
    background-color: var(--Warning-Strong);
    border-color: var(--Warning-Strong);
}
.btn-warning-s:hover {
    color: var(--White);
    background-color: var(--Warning-Dark);
    border-color: var(--Warning-Dark);
}
.btn-warning-d {
    color: var(--White);
    background-color: var(--Warning-Dark);
    border-color: var(--Warning-Dark);
}
.btn-warning-d:hover {
    color: var(--White);
    background-color: var(--Warning-Soft);
    border-color: var(--Warning-Soft);
}
.btn-warning-f {
    color: var(--White);
    background-color: var(--Warning-Soft);
    border-color: var(--Warning-Soft);
}
.btn-warning-f:hover {
    color: var(--White);
    background-color: var(--Warning-Ghost);
    border-color: var(--Warning-Ghost);
}
.btn-warning-g {
    color: var(--White);
    background-color: var(--Warning-Ghost);
    border-color: var(--Warning-Ghost);
}
.btn-warning-g:hover {
    color: var(--Warning-Ghost);
    background-color: var(--White);
    border-color: var(--Warning-Ghost);
}
.btn-warning:disabled,
.btn-warning.disabled {
    color: var(--White-Light);
    background-color: var(--Warning-Light);
    border-color: var(--Warning-Light);
}
.btn-warning:active,
.btn-warning.active {
    color: #fff;
    background-color: var(--Warning-Light);
    border-color: var(--Warning-Light);
}
.btn-warning:active:focus,
.btn-warning.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-warning-gradient,
.btn-warning-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning_RGBA), 1), rgba(var(--Warning-Light_RGBA), 1));
}
.btn-warning-l-gradient,
.btn-warning-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Light_RGBA), 1), rgba(var(--Warning_RGBA), 1));
}
.btn-warning-s-gradient,
.btn-warning-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Strong_RGBA), 1), rgba(var(--Warning-Soft_RGBA), 1));
}
.btn-warning-d-gradient,
.btn-warning-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Dark_RGBA), 1), rgba(var(--Warning-Ghost_RGBA), 1));
}
.btn-warning-f-gradient,
.btn-warning-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Soft_RGBA), 1), rgba(var(--Warning-Strong_RGBA), 1));
}
.btn-warning-g-gradient,
.btn-warning-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Warning-Ghost_RGBA), 1), rgba(var(--Warning-Dark_RGBA), 1));
}

.btn-failed {
    color: var(--White);
    background-color: var(--Failed);
    border-color: var(--Failed);
}
.btn-failed:hover {
    color: var(--White);
    background-color: var(--Failed-Light);
    border-color: var(--Failed-Light);
}
.btn-failed-l {
    color: var(--White);
    background-color: var(--Failed-Light);
    border-color: var(--Failed-Light);
}
.btn-failed-l:hover {
    color: var(--White);
    background-color: var(--Failed-Strong);
    border-color: var(--Failed-Strong);
}
.btn-failed-s {
    color: var(--White);
    background-color: var(--Failed-Strong);
    border-color: var(--Failed-Strong);
}
.btn-failed-s:hover {
    color: var(--White);
    background-color: var(--Failed-Dark);
    border-color: var(--Failed-Dark);
}
.btn-failed-d {
    color: var(--White);
    background-color: var(--Failed-Dark);
    border-color: var(--Failed-Dark);
}
.btn-failed-d:hover {
    color: var(--White);
    background-color: var(--Failed-Soft);
    border-color: var(--Failed-Soft);
}
.btn-failed-f {
    color: var(--White);
    background-color: var(--Failed-Soft);
    border-color: var(--Failed-Soft);
}
.btn-failed-f:hover {
    color: var(--White);
    background-color: var(--Failed-Ghost);
    border-color: var(--Failed-Ghost);
}
.btn-failed-g {
    color: var(--White);
    background-color: var(--Failed-Ghost);
    border-color: var(--Failed-Ghost);
}
.btn-failed-g:hover {
    color: var(--Failed-Ghost);
    background-color: var(--White);
    border-color: var(--Failed-Ghost);
}
.btn-failed:disabled,
.btn-failed.disabled {
    color: var(--White-Light);
    background-color: var(--Failed-Light);
    border-color: var(--Failed-Light);
}
.btn-failed:active,
.btn-failed.active {
    color: #fff;
    background-color: var(--Failed-Light);
    border-color: var(--Failed-Light);
}
.btn-failed:active:focus,
.btn-failed.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-failed-gradient,
.btn-failed-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed_RGBA), 1), rgba(var(--Failed-Light_RGBA), 1));
}
.btn-failed-l-gradient,
.btn-failed-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Light_RGBA), 1), rgba(var(--Failed_RGBA), 1));
}
.btn-failed-s-gradient,
.btn-failed-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Strong_RGBA), 1), rgba(var(--Failed-Soft_RGBA), 1));
}
.btn-failed-d-gradient,
.btn-failed-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Dark_RGBA), 1), rgba(var(--Failed-Ghost_RGBA), 1));
}
.btn-failed-f-gradient,
.btn-failed-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Soft_RGBA), 1), rgba(var(--Failed-Strong_RGBA), 1));
}
.btn-failed-g-gradient,
.btn-failed-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Failed-Ghost_RGBA), 1), rgba(var(--Failed-Dark_RGBA), 1));
}

.btn-success {
    color: var(--White);
    background-color: var(--Success);
    border-color: var(--Success);
}
.btn-success:hover {
    color: var(--White);
    background-color: var(--Success-Light);
    border-color: var(--Success-Light);
}
.btn-success-l {
    color: var(--White);
    background-color: var(--Success-Light);
    border-color: var(--Success-Light);
}
.btn-success-l:hover {
    color: var(--White);
    background-color: var(--Success-Strong);
    border-color: var(--Success-Strong);
}
.btn-success-s {
    color: var(--White);
    background-color: var(--Success-Strong);
    border-color: var(--Success-Strong);
}
.btn-success-s:hover {
    color: var(--White);
    background-color: var(--Success-Dark);
    border-color: var(--Success-Dark);
}
.btn-success-d {
    color: var(--White);
    background-color: var(--Success-Dark);
    border-color: var(--Success-Dark);
}
.btn-success-d:hover {
    color: var(--White);
    background-color: var(--Success-Soft);
    border-color: var(--Success-Soft);
}
.btn-success-f {
    color: var(--White);
    background-color: var(--Success-Soft);
    border-color: var(--Success-Soft);
}
.btn-success-f:hover {
    color: var(--White);
    background-color: var(--Success-Ghost);
    border-color: var(--Success-Ghost);
}
.btn-success-g {
    color: var(--White);
    background-color: var(--Success-Ghost);
    border-color: var(--Success-Ghost);
}
.btn-success-g:hover {
    color: var(--Success-Ghost);
    background-color: var(--White);
    border-color: var(--Success-Ghost);
}
.btn-success:disabled,
.btn-success.disabled {
    color: var(--White-Light);
    background-color: var(--Success-Light);
    border-color: var(--Success-Light);
}
.btn-success:active,
.btn-success.active {
    color: #fff;
    background-color: var(--Success-Light);
    border-color: var(--Success-Light);
}
.btn-success:active:focus,
.btn-success.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-success-gradient,
.btn-success-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success_RGBA), 1), rgba(var(--Success-Light_RGBA), 1));
}
.btn-success-l-gradient,
.btn-success-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Light_RGBA), 1), rgba(var(--Success_RGBA), 1));
}
.btn-success-s-gradient,
.btn-success-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Strong_RGBA), 1), rgba(var(--Success-Soft_RGBA), 1));
}
.btn-success-d-gradient,
.btn-success-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Dark_RGBA), 1), rgba(var(--Success-Ghost_RGBA), 1));
}
.btn-success-f-gradient,
.btn-success-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Soft_RGBA), 1), rgba(var(--Success-Strong_RGBA), 1));
}
.btn-success-g-gradient,
.btn-success-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Success-Ghost_RGBA), 1), rgba(var(--Success-Dark_RGBA), 1));
}

.btn-dark {
    color: var(--White);
    background-color: var(--Dark);
    border-color: var(--Dark);
}
.btn-dark:hover {
    color: var(--White);
    background-color: var(--Dark-Light);
    border-color: var(--Dark-Light);
}
.btn-dark-l {
    color: var(--White);
    background-color: var(--Dark-Light);
    border-color: var(--Dark-Light);
}
.btn-dark-l:hover {
    color: var(--White);
    background-color: var(--Dark-Strong);
    border-color: var(--Dark-Strong);
}
.btn-dark-s {
    color: var(--White);
    background-color: var(--Dark-Strong);
    border-color: var(--Dark-Strong);
}
.btn-dark-s:hover {
    color: var(--White);
    background-color: var(--Dark-Dark);
    border-color: var(--Dark-Dark);
}
.btn-dark-d {
    color: var(--White);
    background-color: var(--Dark-Dark);
    border-color: var(--Dark-Dark);
}
.btn-dark-d:hover {
    color: var(--White);
    background-color: var(--Dark-Soft);
    border-color: var(--Dark-Soft);
}
.btn-dark-f {
    color: var(--White);
    background-color: var(--Dark-Soft);
    border-color: var(--Dark-Soft);
}
.btn-dark-f:hover {
    color: var(--White);
    background-color: var(--Dark-Ghost);
    border-color: var(--Dark-Ghost);
}
.btn-dark-g {
    color: var(--White);
    background-color: var(--Dark-Ghost);
    border-color: var(--Dark-Ghost);
}
.btn-dark-g:hover {
    color: var(--Dark-Ghost);
    background-color: var(--White);
    border-color: var(--Dark-Ghost);
}
.btn-dark:disabled,
.btn-dark.disabled {
    color: var(--White-Light);
    background-color: var(--Dark-Light);
    border-color: var(--Dark-Light);
}
.btn-dark:active,
.btn-dark.active {
    color: #fff;
    background-color: var(--Dark-Light);
    border-color: var(--Dark-Light);
}
.btn-dark:active:focus,
.btn-dark.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-dark-gradient,
.btn-dark-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark_RGBA), 1), rgba(var(--Dark-Light_RGBA), 1));
}
.btn-dark-l-gradient,
.btn-dark-l-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Light_RGBA), 1), rgba(var(--Dark_RGBA), 1));
}
.btn-dark-s-gradient,
.btn-dark-s-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Strong_RGBA), 1), rgba(var(--Dark-Soft_RGBA), 1));
}
.btn-dark-d-gradient,
.btn-dark-d-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Dark_RGBA), 1), rgba(var(--Dark-Ghost_RGBA), 1));
}
.btn-dark-f-gradient,
.btn-dark-f-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Soft_RGBA), 1), rgba(var(--Dark-Strong_RGBA), 1));
}
.btn-dark-g-gradient,
.btn-dark-g-gradient-hover:hover {
    background-image: linear-gradient(-45deg, rgba(var(--Dark-Ghost_RGBA), 1), rgba(var(--Dark-Dark_RGBA), 1));
}

/* Callout */

.callout-default {
    border-color: rgba(var(--Default_RGBA), .25);
    background-color: rgba(var(--Default_RGBA), .075);
}
.callout-default-l {
    border-color: rgba(var(--Default-Light_RGBA), .25);
    background-color: rgba(var(--Default-Light_RGBA), .075);
}
.callout-default-s {
    border-color: rgba(var(--Default-Strong_RGBA), .25);
    background-color: rgba(var(--Default-Strong_RGBA), .075);
}
.callout-default-d {
    border-color: rgba(var(--Default-Dark_RGBA), .25);
    background-color: rgba(var(--Default-Dark_RGBA), .075);
}
.callout-default-f {
    border-color: rgba(var(--Default-Soft_RGBA), .25);
    background-color: rgba(var(--Default-Soft_RGBA), .075);
}
.callout-default-g {
    border-color: rgba(var(--Default-Ghost_RGBA), .25);
    background-color: rgba(var(--Default-Ghost_RGBA), .075);
}

.callout-white {
    border-color: rgba(var(--White_RGBA), .25);
    background-color: rgba(var(--White_RGBA), .075);
}
.callout-white-l {
    border-color: rgba(var(--White-Light_RGBA), .25);
    background-color: rgba(var(--White-Light_RGBA), .075);
}
.callout-white-s {
    border-color: rgba(var(--White-Strong_RGBA), .25);
    background-color: rgba(var(--White-Strong_RGBA), .075);
}
.callout-white-d {
    border-color: rgba(var(--White-Dark_RGBA), .25);
    background-color: rgba(var(--White-Dark_RGBA), .075);
}
.callout-white-f {
    border-color: rgba(var(--White-Soft_RGBA), .25);
    background-color: rgba(var(--White-Soft_RGBA), .075);
}
.callout-white-g {
    border-color: rgba(var(--White-Ghost_RGBA), .25);
    background-color: rgba(var(--White-Ghost_RGBA), .075);
}

.callout-primary {
    border-color: rgba(var(--Primary_RGBA), .25);
    background-color: rgba(var(--Primary_RGBA), .075);
}
.callout-primary-l {
    border-color: rgba(var(--Primary-Light_RGBA), .25);
    background-color: rgba(var(--Primary-Light_RGBA), .075);
}
.callout-primary-s {
    border-color: rgba(var(--Primary-Strong_RGBA), .25);
    background-color: rgba(var(--Primary-Strong_RGBA), .075);
}
.callout-primary-d {
    border-color: rgba(var(--Primary-Dark_RGBA), .25);
    background-color: rgba(var(--Primary-Dark_RGBA), .075);
}
.callout-primary-f {
    border-color: rgba(var(--Primary-Soft_RGBA), .25);
    background-color: rgba(var(--Primary-Soft_RGBA), .075);
}
.callout-primary-g {
    border-color: rgba(var(--Primary-Ghost_RGBA), .25);
    background-color: rgba(var(--Primary-Ghost_RGBA), .075);
}

.callout-secondary {
    border-color: rgba(var(--Secondary_RGBA), .25);
    background-color: rgba(var(--Secondary_RGBA), .075);
}
.callout-secondary-l {
    border-color: rgba(var(--Secondary-Light_RGBA), .25);
    background-color: rgba(var(--Secondary-Light_RGBA), .075);
}
.callout-secondary-s {
    border-color: rgba(var(--Secondary-Strong_RGBA), .25);
    background-color: rgba(var(--Secondary-Strong_RGBA), .075);
}
.callout-secondary-d {
    border-color: rgba(var(--Secondary-Dark_RGBA), .25);
    background-color: rgba(var(--Secondary-Dark_RGBA), .075);
}
.callout-secondary-f {
    border-color: rgba(var(--Secondary-Soft_RGBA), .25);
    background-color: rgba(var(--Secondary-Soft_RGBA), .075);
}
.callout-secondary-g {
    border-color: rgba(var(--Secondary-Ghost_RGBA), .25);
    background-color: rgba(var(--Secondary-Ghost_RGBA), .075);
}

.callout-info {
    border-color: rgba(var(--Info_RGBA), .25);
    background-color: rgba(var(--Info_RGBA), .075);
}
.callout-info-l {
    border-color: rgba(var(--Info-Light_RGBA), .25);
    background-color: rgba(var(--Info-Light_RGBA), .075);
}
.callout-info-s {
    border-color: rgba(var(--Info-Strong_RGBA), .25);
    background-color: rgba(var(--Info-Strong_RGBA), .075);
}
.callout-info-d {
    border-color: rgba(var(--Info-Dark_RGBA), .25);
    background-color: rgba(var(--Info-Dark_RGBA), .075);
}
.callout-info-f {
    border-color: rgba(var(--Info-Soft_RGBA), .25);
    background-color: rgba(var(--Info-Soft_RGBA), .075);
}
.callout-info-g {
    border-color: rgba(var(--Info-Ghost_RGBA), .25);
    background-color: rgba(var(--Info-Ghost_RGBA), .075);
}

.callout-optional {
    border-color: rgba(var(--Optional_RGBA), .25);
    background-color: rgba(var(--Optional_RGBA), .075);
}
.callout-optional-l {
    border-color: rgba(var(--Optional-Light_RGBA), .25);
    background-color: rgba(var(--Optional-Light_RGBA), .075);
}
.callout-optional-s {
    border-color: rgba(var(--Optional-Strong_RGBA), .25);
    background-color: rgba(var(--Optional-Strong_RGBA), .075);
}
.callout-optional-d {
    border-color: rgba(var(--Optional-Dark_RGBA), .25);
    background-color: rgba(var(--Optional-Dark_RGBA), .075);
}
.callout-optional-f {
    border-color: rgba(var(--Optional-Soft_RGBA), .25);
    background-color: rgba(var(--Optional-Soft_RGBA), .075);
}
.callout-optional-g {
    border-color: rgba(var(--Optional-Ghost_RGBA), .25);
    background-color: rgba(var(--Optional-Ghost_RGBA), .075);
}

.callout-warning {
    border-color: rgba(var(--Warning_RGBA), .25);
    background-color: rgba(var(--Warning_RGBA), .075);
}
.callout-warning-l {
    border-color: rgba(var(--Warning-Light_RGBA), .25);
    background-color: rgba(var(--Warning-Light_RGBA), .075);
}
.callout-warning-s {
    border-color: rgba(var(--Warning-Strong_RGBA), .25);
    background-color: rgba(var(--Warning-Strong_RGBA), .075);
}
.callout-warning-d {
    border-color: rgba(var(--Warning-Dark_RGBA), .25);
    background-color: rgba(var(--Warning-Dark_RGBA), .075);
}
.callout-warning-f {
    border-color: rgba(var(--Warning-Soft_RGBA), .25);
    background-color: rgba(var(--Warning-Soft_RGBA), .075);
}
.callout-warning-g {
    border-color: rgba(var(--Warning-Ghost_RGBA), .25);
    background-color: rgba(var(--Warning-Ghost_RGBA), .075);
}

.callout-failed {
    border-color: rgba(var(--Failed_RGBA), .25);
    background-color: rgba(var(--Failed_RGBA), .075);
}
.callout-failed-l {
    border-color: rgba(var(--Failed-Light_RGBA), .25);
    background-color: rgba(var(--Failed-Light_RGBA), .075);
}
.callout-failed-s {
    border-color: rgba(var(--Failed-Strong_RGBA), .25);
    background-color: rgba(var(--Failed-Strong_RGBA), .075);
}
.callout-failed-d {
    border-color: rgba(var(--Failed-Dark_RGBA), .25);
    background-color: rgba(var(--Failed-Dark_RGBA), .075);
}
.callout-failed-f {
    border-color: rgba(var(--Failed-Soft_RGBA), .25);
    background-color: rgba(var(--Failed-Soft_RGBA), .075);
}
.callout-failed-g {
    border-color: rgba(var(--Failed-Ghost_RGBA), .25);
    background-color: rgba(var(--Failed-Ghost_RGBA), .075);
}

.callout-success {
    border-color: rgba(var(--Success_RGBA), .25);
    background-color: rgba(var(--Success_RGBA), .075);
}
.callout-success-l {
    border-color: rgba(var(--Success-Light_RGBA), .25);
    background-color: rgba(var(--Success-Light_RGBA), .075);
}
.callout-success-s {
    border-color: rgba(var(--Success-Strong_RGBA), .25);
    background-color: rgba(var(--Success-Strong_RGBA), .075);
}
.callout-success-d {
    border-color: rgba(var(--Success-success_RGBA), .25);
    background-color: rgba(var(--Success-success_RGBA), .075);
}
.callout-success-f {
    border-color: rgba(var(--Success-Soft_RGBA), .25);
    background-color: rgba(var(--Success-Soft_RGBA), .075);
}
.callout-success-g {
    border-color: rgba(var(--Success-Ghost_RGBA), .25);
    background-color: rgba(var(--Success-Ghost_RGBA), .075);
}

.callout-dark {
    border-color: rgba(var(--Dark_RGBA), .25);
    background-color: rgba(var(--Dark_RGBA), .075);
}
.callout-dark-l {
    border-color: rgba(var(--Dark-Light_RGBA), .25);
    background-color: rgba(var(--Dark-Light_RGBA), .075);
}
.callout-dark-s {
    border-color: rgba(var(--Dark-Strong_RGBA), .25);
    background-color: rgba(var(--Dark-Strong_RGBA), .075);
}
.callout-dark-d {
    border-color: rgba(var(--Dark-Dark_RGBA), .25);
    background-color: rgba(var(--Dark-Dark_RGBA), .075);
}
.callout-dark-f {
    border-color: rgba(var(--Dark-Soft_RGBA), .25);
    background-color: rgba(var(--Dark-Soft_RGBA), .075);
}
.callout-dark-g {
    border-color: rgba(var(--Dark-Ghost_RGBA), .25);
    background-color: rgba(var(--Dark-Ghost_RGBA), .075);
}

/****Text Highlight ***/

.text-highlight-primary {
    background-image: linear-gradient(to bottom, rgba(55, 125, 255, .5) 0, rgba(55, 125, 255, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-secondary {
    background-image: linear-gradient(to bottom, rgba(113, 134, 157, .5) 0, rgba(113, 134, 157, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-success {
    background-image: linear-gradient(to bottom, rgba(0, 201, 167, .5) 0, rgba(0, 201, 167, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-info {
    background-image: linear-gradient(to bottom, rgba(9, 165, 190, .5) 0, rgba(9, 165, 190, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-warning {
    background-image: linear-gradient(to bottom, rgba(245, 202, 153, .5) 0, rgba(245, 202, 153, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-danger {
    background-image: linear-gradient(to bottom, rgba(237, 76, 120, .5) 0, rgba(237, 76, 120, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-light {
    background-image: linear-gradient(to bottom, rgba(247, 250, 255, .5) 0, rgba(247, 250, 255, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-dark {
    background-image: linear-gradient(to bottom, rgba(33, 50, 91, .5) 0, rgba(33, 50, 91, .5) 100%);
    background-repeat: repeat-x
}
.text-highlight-indigo {
    background-image: linear-gradient(to bottom, rgba(45, 21, 130, .5) 0, rgba(45, 21, 130, .5) 100%);
    background-repeat: repeat-x
}

.bg-facebook {
    background-color: #3c5a99 !important;
    color: #fff;
}
.bg-facebook:hover {
    background-color: #30487a !important;
    color: #fff;
}

.text-facebook {
    color: #3c5a99 !important
}

.bg-google-plus {
    background-color: #dd4b39 !important;
    color: #fff;
}
.bg-google-plus:hover {
    background-color: #b13c2e !important;
    color: #fff;
}

.text-google-plus {
    color: #dd4b39 !important
}

.bg-twitter {
    background-color: #1da1f2 !important;
}
.bg-twitter:hover {
    background-color: #1781c2 !important;
}

.text-twitter {
    color: #1da1f2 !important
}

.bg-linkedin {
    background-color: #0077b5 !important;
}
.bg-linkedin:hover {
    background-color: #005f91 !important;
}

.text-linkedin {
    color: #0077b5 !important
}

.bg-youtube {
    background-color: #ff0001 !important
}
.bg-youtube:hover {
    background-color: #cc0001 !important
}

.text-youtube {
    color: #ff0001 !important
}

::-moz-selection {
    color: #fff;
    background-color: #377dff
}
::selection {
    color: #fff;
    background-color: #377dff
}

/****Vectors Colors ***/

.fill-transparent {
    fill: var(--Transparent) !important;
}

.fill-default,
.fill-default-before:before,
.fill-default-after:after,
.fill-default-hover:hover {
    fill: var(--Default) !important;
}

.fill-default-before:before .form-check-input:checked {
        fill: var(--Default) !important;
    }

.fill-default-l,
.fill-default-l-before:before,
.fill-default-l-after:after,
.fill-default-l-hover:hover {
    fill: var(--Default-Light) !important;
}

.fill-default-s,
.fill-default-s-before:before,
.fill-default-s-after:after,
.fill-default-s-hover:hover {
    fill: var(--Default-Strong) !important;
}

.fill-default-d,
.fill-default-d-before:before,
.fill-default-d-after:after,
.fill-default-d-hover:hover {
    fill: var(--Default-Dark) !important;
}

.fill-default-f,
.fill-default-f-before:before,
.fill-default-f-after:after,
.fill-default-f-hover:hover {
    fill: var(--Default-Soft) !important;
}

.fill-default-g,
.fill-default-g-before:before,
.fill-default-g-after:after,
.fill-default-g-hover:hover {
    fill: var(--Default-Ghost) !important;
}

.fill-white,
.fill-white-before:before,
.fill-white-after:after,
.fill-white-hover:hover {
    fill: var(--White) !important;
}

.fill-white-l,
.fill-white-l-before:before,
.fill-white-l-after:after,
.fill-white-l-hover:hover {
    fill: var(--White-Light) !important;
}

.fill-white-s,
.fill-white-s-before:before,
.fill-white-s-after:after,
.fill-white-s-hover:hover {
    fill: var(--White-Strong) !important;
}

.fill-white-d,
.fill-white-d-before:before,
.fill-white-d-after:after,
.fill-white-d-hover:hover {
    fill: var(--White-Dark) !important;
}

.fill-white-f,
.fill-white-f-before:before,
.fill-white-f-after:after,
.fill-white-f-hover:hover {
    fill: var(--White-Soft) !important;
}

.fill-white-g,
.fill-white-g-before:before,
.fill-white-g-after:after,
.fill-white-g-hover:hover {
    fill: var(--White-Ghost) !important;
}

.fill-primary,
.fill-primary-before:before,
.fill-primary-after:after,
.fill-primary-hover:hover {
    fill: var(--Primary) !important;
}

.fill-primary-l,
.fill-primary-l-before:before,
.fill-primary-l-after:after,
.fill-primary-l-hover:hover {
    fill: var(--Primary-Light) !important;
}

.fill-primary-s,
.fill-primary-s-before:before,
.fill-primary-s-after:after,
.fill-primary-s-hover:hover {
    fill: var(--Primary-Strong) !important;
}

.fill-primary-d,
.fill-primary-d-before:before,
.fill-primary-d-after:after,
.fill-primary-d-hover:hover {
    fill: var(--Primary-Dark) !important;
}

.fill-primary-f,
.fill-primary-f-before:before,
.fill-primary-f-after:after,
.fill-primary-f-hover:hover {
    fill: var(--Primary-Soft) !important;
}

.fill-primary-g,
.fill-primary-g-before:before,
.fill-primary-g-after:after,
.fill-primary-g-hover:hover {
    fill: var(--Primary-Ghost) !important;
}

.fill-secondary,
.fill-secondary-before:before,
.fill-secondary-after:after,
.fill-secondary-hover:hover {
    fill: var(--Secondary) !important;
}

.fill-secondary-l,
.fill-secondary-l-before:before,
.fill-secondary-l-after:after,
.fill-secondary-l-hover:hover {
    fill: var(--Secondary-Light) !important;
}

.fill-secondary-s,
.fill-secondary-s-before:before,
.fill-secondary-s-after:after,
.fill-secondary-s-hover:hover {
    fill: var(--Secondary-Strong) !important;
}

.fill-secondary-d,
.fill-secondary-d-before:before,
.fill-secondary-d-after:after,
.fill-secondary-d-hover:hover {
    fill: var(--Secondary-Dark) !important;
}

.fill-secondary-f,
.fill-secondary-f-before:before,
.fill-secondary-f-after:after,
.fill-secondary-f-hover:hover {
    fill: var(--Secondary-Soft) !important;
}

.fill-secondary-g,
.fill-secondary-g-before:before,
.fill-secondary-g-after:after,
.fill-secondary-g-hover:hover {
    fill: var(--Secondary-Ghost) !important;
}

.fill-optional,
.fill-optional-before:before,
.fill-optional-after:after,
.fill-optional-hover:hover {
    fill: var(--Optional) !important;
}

.fill-optional-l,
.fill-optional-l-before:before,
.fill-optional-l-after:after,
.fill-optional-l-hover:hover {
    fill: var(--Optional-Light) !important;
}

.fill-optional-s,
.fill-optional-s-before:before,
.fill-optional-s-after:after,
.fill-optional-s-hover:hover {
    fill: var(--Optional-Strong) !important;
}

.fill-optional-d,
.fill-optional-d-before:before,
.fill-optional-d-after:after,
.fill-optional-d-hover:hover {
    fill: var(--Optional-Dark) !important;
}

.fill-optional-f,
.fill-optional-f-before:before,
.fill-optional-f-after:after,
.fill-optional-f-hover:hover {
    fill: var(--Optional-Soft) !important;
}

.fill-optional-g,
.fill-optional-g-before:before,
.fill-optional-g-after:after,
.fill-optional-g-hover:hover {
    fill: var(--Optional-Ghost) !important;
}

.fill-info,
.fill-info-before:before,
.fill-info-after:after,
.fill-info-hover:hover {
    fill: var(--Info) !important;
}

.fill-info-l,
.fill-info-l-before:before,
.fill-info-l-after:after,
.fill-info-l-hover:hover {
    fill: var(--Info-Light) !important;
}

.fill-info-s,
.fill-info-s-before:before,
.fill-info-s-after:after,
.fill-info-s-hover:hover {
    fill: var(--Info-Strong) !important;
}

.fill-info-d,
.fill-info-d-before:before,
.fill-info-d-after:after,
.fill-info-d-hover:hover {
    fill: var(--Info-Dark) !important;
}

.fill-info-f,
.fill-info-f-before:before,
.fill-info-f-after:after,
.fill-info-f-hover:hover {
    fill: var(--Info-Soft) !important;
}

.fill-info-g,
.fill-info-g-before:before,
.fill-info-g-after:after,
.fill-info-g-hover:hover {
    fill: var(--Info-Ghost) !important;
}

.fill-warning,
.fill-warning-before:before,
.fill-warning-after:after,
.fill-warning-hover:hover {
    fill: var(--Warning) !important;
}

.fill-warning-l,
.fill-warning-l-before:before,
.fill-warning-l-after:after,
.fill-warning-l-hover:hover {
    fill: var(--Warning-Light) !important;
}

.fill-warning-s,
.fill-warning-s-before:before,
.fill-warning-s-after:after,
.fill-warning-s-hover:hover {
    fill: var(--Warning-Strong) !important;
}

.fill-warning-d,
.fill-warning-d-before:before,
.fill-warning-d-after:after,
.fill-warning-d-hover:hover {
    fill: var(--Warning-Dark) !important;
}

.fill-warning-f,
.fill-warning-f-before:before,
.fill-warning-f-after:after,
.fill-warning-f-hover:hover {
    fill: var(--Warning-Soft) !important;
}

.fill-warning-g,
.fill-warning-g-before:before,
.fill-warning-g-after:after,
.fill-warning-g-hover:hover {
    fill: var(--Warning-Ghost) !important;
}

.fill-failed,
.fill-failed-before:before,
.fill-failed-after:after,
.fill-failed-hover:hover {
    fill: var(--Failed) !important;
}

.fill-failed-l,
.fill-failed-l-before:before,
.fill-failed-l-after:after,
.fill-failed-l-hover:hover {
    fill: var(--Failed-Light) !important;
}

.fill-failed-s,
.fill-failed-s-before:before,
.fill-failed-s-after:after,
.fill-failed-s-hover:hover {
    fill: var(--Failed-Strong) !important;
}

.fill-failed-d,
.fill-failed-d-before:before,
.fill-failed-d-after:after,
.fill-failed-d-hover:hover {
    fill: var(--Failed-Dark) !important;
}

.fill-failed-f,
.fill-failed-f-before:before,
.fill-failed-f-after:after,
.fill-failed-f-hover:hover {
    fill: var(--Failed-Soft) !important;
}

.fill-failed-g,
.fill-failed-g-before:before,
.fill-failed-g-after:after,
.fill-failed-g-hover:hover {
    fill: var(--Failed-Ghost) !important;
}

.fill-success,
.fill-success-before:before,
.fill-success-after:after,
.fill-success-hover:hover {
    fill: var(--Success) !important;
}

.fill-success-l,
.fill-success-l-before:before,
.fill-success-l-after:after,
.fill-success-l-hover:hover {
    fill: var(--Success-Light) !important;
}

.fill-success-s,
.fill-success-s-before:before,
.fill-success-s-after:after,
.fill-success-s-hover:hover {
    fill: var(--Success-Strong) !important;
}

.fill-success-d,
.fill-success-d-before:before,
.fill-success-d-after:after,
.fill-success-d-hover:hover {
    fill: var(--Success-Dark) !important;
}

.fill-success-f,
.fill-success-f-before:before,
.fill-success-f-after:after,
.fill-success-f-hover:hover {
    fill: var(--Success-Soft) !important;
}

.fill-success-g,
.fill-success-g-before:before,
.fill-success-g-after:after,
.fill-success-g-hover:hover {
    fill: var(--Success-Ghost) !important;
}

.fill-dark,
.fill-dark-before:before,
.fill-dark-after:after,
.fill-dark-hover:hover {
    fill: var(--Dark) !important;
}

.fill-dark-l,
.fill-dark-l-before:before,
.fill-dark-l-after:after,
.fill-dark-l-hover:hover {
    fill: var(--Dark-Light) !important;
}

.fill-dark-s,
.fill-dark-s-before:before,
.fill-dark-s-after:after,
.fill-dark-s-hover:hover {
    fill: var(--Dark-Strong) !important;
}

.fill-dark-d,
.fill-dark-d-before:before,
.fill-dark-d-after:after,
.fill-dark-d-hover:hover {
    fill: var(--Dark-Dark) !important;
}

.fill-dark-f,
.fill-dark-f-before:before,
.fill-dark-f-after:after,
.fill-dark-f-hover:hover {
    fill: var(--Dark-Soft) !important;
}

.fill-dark-g,
.fill-dark-g-before:before,
.fill-dark-g-after:after,
.fill-dark-g-hover:hover {
    fill: var(--Dark-Ghost) !important;
}


/* stroke Colors */

.stroke-transparent {
    stroke: var(--Transparent) !important;
}

.stroke-default,
.stroke-default-before:before,
.stroke-default-before:before .form-check-input:checked,
.stroke-default-after:after,
.stroke-default-hover:hover {
    stroke: var(--Default) !important;
}

.stroke-default-l,
.stroke-default-l-before:before,
.stroke-default-l-after:after,
.stroke-default-l-hover:hover {
    stroke: var(--Default-Light) !important;
}

.stroke-default-s,
.stroke-default-s-before:before,
.stroke-default-s-after:after,
.stroke-default-s-hover:hover {
    stroke: var(--Default-Strong) !important;
}

.stroke-default-d,
.stroke-default-d-before:before,
.stroke-default-d-after:after,
.stroke-default-d-hover:hover {
    stroke: var(--Default-Dark) !important;
}

.stroke-default-f,
.stroke-default-f-before:before,
.stroke-default-f-after:after,
.stroke-default-f-hover:hover {
    stroke: var(--Default-Soft) !important;
}

.stroke-default-g,
.stroke-default-g-before:before,
.stroke-default-g-after:after,
.stroke-default-g-hover:hover {
    stroke: var(--Default-Ghost) !important;
}

.stroke-white,
.stroke-white-before:before,
.stroke-white-after:after,
.stroke-white-hover:hover {
    stroke: var(--White) !important;
}

.stroke-white-l,
.stroke-white-l-before:before,
.stroke-white-l-after:after,
.stroke-white-l-hover:hover {
    stroke: var(--White-Light) !important;
}

.stroke-white-s,
.stroke-white-s-before:before,
.stroke-white-s-after:after,
.stroke-white-s-hover:hover {
    stroke: var(--White-Strong) !important;
}

.stroke-white-d,
.stroke-white-d-before:before,
.stroke-white-d-after:after,
.stroke-white-d-hover:hover {
    stroke: var(--White-Dark) !important;
}

.stroke-white-f,
.stroke-white-f-before:before,
.stroke-white-f-after:after,
.stroke-white-f-hover:hover {
    stroke: var(--White-Soft) !important;
}

.stroke-white-g,
.stroke-white-g-before:before,
.stroke-white-g-after:after,
.stroke-white-g-hover:hover {
    stroke: var(--White-Ghost) !important;
}

.stroke-primary,
.stroke-primary-before:before,
.stroke-primary-after:after,
.stroke-primary-hover:hover {
    stroke: var(--Primary) !important;
}

.stroke-primary-l,
.stroke-primary-l-before:before,
.stroke-primary-l-after:after,
.stroke-primary-l-hover:hover {
    stroke: var(--Primary-Light) !important;
}

.stroke-primary-s,
.stroke-primary-s-before:before,
.stroke-primary-s-after:after,
.stroke-primary-s-hover:hover {
    stroke: var(--Primary-Strong) !important;
}

.stroke-primary-d,
.stroke-primary-d-before:before,
.stroke-primary-d-after:after,
.stroke-primary-d-hover:hover {
    stroke: var(--Primary-Dark) !important;
}

.stroke-primary-f,
.stroke-primary-f-before:before,
.stroke-primary-f-after:after,
.stroke-primary-f-hover:hover {
    stroke: var(--Primary-Soft) !important;
}

.stroke-primary-g,
.stroke-primary-g-before:before,
.stroke-primary-g-after:after,
.stroke-primary-g-hover:hover {
    stroke: var(--Primary-Ghost) !important;
}

.stroke-secondary,
.stroke-secondary-before:before,
.stroke-secondary-after:after,
.stroke-secondary-hover:hover {
    stroke: var(--Secondary) !important;
}

.stroke-secondary-l,
.stroke-secondary-l-before:before,
.stroke-secondary-l-after:after,
.stroke-secondary-l-hover:hover {
    stroke: var(--Secondary-Light) !important;
}

.stroke-secondary-s,
.stroke-secondary-s-before:before,
.stroke-secondary-s-after:after,
.stroke-secondary-s-hover:hover {
    stroke: var(--Secondary-Strong) !important;
}

.stroke-secondary-d,
.stroke-secondary-d-before:before,
.stroke-secondary-d-after:after,
.stroke-secondary-d-hover:hover {
    stroke: var(--Secondary-Dark) !important;
}

.stroke-secondary-f,
.stroke-secondary-f-before:before,
.stroke-secondary-f-after:after,
.stroke-secondary-f-hover:hover {
    stroke: var(--Secondary-Soft) !important;
}

.stroke-secondary-g,
.stroke-secondary-g-before:before,
.stroke-secondary-g-after:after,
.stroke-secondary-g-hover:hover {
    stroke: var(--Secondary-Ghost) !important;
}

.stroke-optional,
.stroke-optional-before:before,
.stroke-optional-after:after,
.stroke-optional-hover:hover {
    stroke: var(--Optional) !important;
}

.stroke-optional-l,
.stroke-optional-l-before:before,
.stroke-optional-l-after:after,
.stroke-optional-l-hover:hover {
    stroke: var(--Optional-Light) !important;
}

.stroke-optional-s,
.stroke-optional-s-before:before,
.stroke-optional-s-after:after,
.stroke-optional-s-hover:hover {
    stroke: var(--Optional-Strong) !important;
}

.stroke-optional-d,
.stroke-optional-d-before:before,
.stroke-optional-d-after:after,
.stroke-optional-d-hover:hover {
    stroke: var(--Optional-Dark) !important;
}

.stroke-optional-f,
.stroke-optional-f-before:before,
.stroke-optional-f-after:after,
.stroke-optional-f-hover:hover {
    stroke: var(--Optional-Soft) !important;
}

.stroke-optional-g,
.stroke-optional-g-before:before,
.stroke-optional-g-after:after,
.stroke-optional-g-hover:hover {
    stroke: var(--Optional-Ghost) !important;
}

.stroke-info,
.stroke-info-before:before,
.stroke-info-after:after,
.stroke-info-hover:hover {
    stroke: var(--Info) !important;
}

.stroke-info-l,
.stroke-info-l-before:before,
.stroke-info-l-after:after,
.stroke-info-l-hover:hover {
    stroke: var(--Info-Light) !important;
}

.stroke-info-s,
.stroke-info-s-before:before,
.stroke-info-s-after:after,
.stroke-info-s-hover:hover {
    stroke: var(--Info-Strong) !important;
}

.stroke-info-d,
.stroke-info-d-before:before,
.stroke-info-d-after:after,
.stroke-info-d-hover:hover {
    stroke: var(--Info-Dark) !important;
}

.stroke-info-f,
.stroke-info-f-before:before,
.stroke-info-f-after:after,
.stroke-info-f-hover:hover {
    stroke: var(--Info-Soft) !important;
}

.stroke-info-g,
.stroke-info-g-before:before,
.stroke-info-g-after:after,
.stroke-info-g-hover:hover {
    stroke: var(--Info-Ghost) !important;
}

.stroke-warning,
.stroke-warning-before:before,
.stroke-warning-after:after,
.stroke-warning-hover:hover {
    stroke: var(--Warning) !important;
}

.stroke-warning-l,
.stroke-warning-l-before:before,
.stroke-warning-l-after:after,
.stroke-warning-l-hover:hover {
    stroke: var(--Warning-Light) !important;
}

.stroke-warning-s,
.stroke-warning-s-before:before,
.stroke-warning-s-after:after,
.stroke-warning-s-hover:hover {
    stroke: var(--Warning-Strong) !important;
}

.stroke-warning-d,
.stroke-warning-d-before:before,
.stroke-warning-d-after:after,
.stroke-warning-d-hover:hover {
    stroke: var(--Warning-Dark) !important;
}

.stroke-warning-f,
.stroke-warning-f-before:before,
.stroke-warning-f-after:after,
.stroke-warning-f-hover:hover {
    stroke: var(--Warning-Soft) !important;
}

.stroke-warning-g,
.stroke-warning-g-before:before,
.stroke-warning-g-after:after,
.stroke-warning-g-hover:hover {
    stroke: var(--Warning-Ghost) !important;
}

.stroke-failed,
.stroke-failed-before:before,
.stroke-failed-after:after,
.stroke-failed-hover:hover {
    stroke: var(--Failed) !important;
}

.stroke-failed-l,
.stroke-failed-l-before:before,
.stroke-failed-l-after:after,
.stroke-failed-l-hover:hover {
    stroke: var(--Failed-Light) !important;
}

.stroke-failed-s,
.stroke-failed-s-before:before,
.stroke-failed-s-after:after,
.stroke-failed-s-hover:hover {
    stroke: var(--Failed-Strong) !important;
}

.stroke-failed-d,
.stroke-failed-d-before:before,
.stroke-failed-d-after:after,
.stroke-failed-d-hover:hover {
    stroke: var(--Failed-Dark) !important;
}

.stroke-failed-f,
.stroke-failed-f-before:before,
.stroke-failed-f-after:after,
.stroke-failed-f-hover:hover {
    stroke: var(--Failed-Soft) !important;
}

.stroke-failed-g,
.stroke-failed-g-before:before,
.stroke-failed-g-after:after,
.stroke-failed-g-hover:hover {
    stroke: var(--Failed-Ghost) !important;
}

.stroke-success,
.stroke-success-before:before,
.stroke-success-after:after,
.stroke-success-hover:hover {
    stroke: var(--Success) !important;
}

.stroke-success-l,
.stroke-success-l-before:before,
.stroke-success-l-after:after,
.stroke-success-l-hover:hover {
    stroke: var(--Success-Light) !important;
}

.stroke-success-s,
.stroke-success-s-before:before,
.stroke-success-s-after:after,
.stroke-success-s-hover:hover {
    stroke: var(--Success-Strong) !important;
}

.stroke-success-d,
.stroke-success-d-before:before,
.stroke-success-d-after:after,
.stroke-success-d-hover:hover {
    stroke: var(--Success-Dark) !important;
}

.stroke-success-f,
.stroke-success-f-before:before,
.stroke-success-f-after:after,
.stroke-success-f-hover:hover {
    stroke: var(--Success-Soft) !important;
}

.stroke-success-g,
.stroke-success-g-before:before,
.stroke-success-g-after:after,
.stroke-success-g-hover:hover {
    stroke: var(--Success-Ghost) !important;
}

.stroke-dark,
.stroke-dark-before:before,
.stroke-dark-after:after,
.stroke-dark-hover:hover {
    stroke: var(--Dark) !important;
}

.stroke-dark-l,
.stroke-dark-l-before:before,
.stroke-dark-l-after:after,
.stroke-dark-l-hover:hover {
    stroke: var(--Dark-Light) !important;
}

.stroke-dark-s,
.stroke-dark-s-before:before,
.stroke-dark-s-after:after,
.stroke-dark-s-hover:hover {
    stroke: var(--Dark-Strong) !important;
}

.stroke-dark-d,
.stroke-dark-d-before:before,
.stroke-dark-d-after:after,
.stroke-dark-d-hover:hover {
    stroke: var(--Dark-Dark) !important;
}

.stroke-dark-f,
.stroke-dark-f-before:before,
.stroke-dark-f-after:after,
.stroke-dark-f-hover:hover {
    stroke: var(--Dark-Soft) !important;
}

.stroke-dark-g,
.stroke-dark-g-before:before,
.stroke-dark-g-after:after,
.stroke-dark-g-hover:hover {
    stroke: var(--Dark-Ghost) !important;
}


/* stop-color Colors */

.stop-transparent {
    stop-color: var(--Transparent) !important;
}

.stop-default,
.stop-default-before:before,
.stop-default-before:before .form-check-input:checked,
.stop-default-after:after,
.stop-default-hover:hover {
    stop-color: var(--Default) !important;
}

.stop-default-l,
.stop-default-l-before:before,
.stop-default-l-after:after,
.stop-default-l-hover:hover {
    stop-color: var(--Default-Light) !important;
}

.stop-default-s,
.stop-default-s-before:before,
.stop-default-s-after:after,
.stop-default-s-hover:hover {
    stop-color: var(--Default-Strong) !important;
}

.stop-default-d,
.stop-default-d-before:before,
.stop-default-d-after:after,
.stop-default-d-hover:hover {
    stop-color: var(--Default-Dark) !important;
}

.stop-default-f,
.stop-default-f-before:before,
.stop-default-f-after:after,
.stop-default-f-hover:hover {
    stop-color: var(--Default-Soft) !important;
}

.stop-default-g,
.stop-default-g-before:before,
.stop-default-g-after:after,
.stop-default-g-hover:hover {
    stop-color: var(--Default-Ghost) !important;
}

.stop-white,
.stop-white-before:before,
.stop-white-after:after,
.stop-white-hover:hover {
    stop-color: var(--White) !important;
}

.stop-white-l,
.stop-white-l-before:before,
.stop-white-l-after:after,
.stop-white-l-hover:hover {
    stop-color: var(--White-Light) !important;
}

.stop-white-s,
.stop-white-s-before:before,
.stop-white-s-after:after,
.stop-white-s-hover:hover {
    stop-color: var(--White-Strong) !important;
}

.stop-white-d,
.stop-white-d-before:before,
.stop-white-d-after:after,
.stop-white-d-hover:hover {
    stop-color: var(--White-Dark) !important;
}

.stop-white-f,
.stop-white-f-before:before,
.stop-white-f-after:after,
.stop-white-f-hover:hover {
    stop-color: var(--White-Soft) !important;
}

.stop-white-g,
.stop-white-g-before:before,
.stop-white-g-after:after,
.stop-white-g-hover:hover {
    stop-color: var(--White-Ghost) !important;
}

.stop-primary,
.stop-primary-before:before,
.stop-primary-after:after,
.stop-primary-hover:hover {
    stop-color: var(--Primary) !important;
}

.stop-primary-l,
.stop-primary-l-before:before,
.stop-primary-l-after:after,
.stop-primary-l-hover:hover {
    stop-color: var(--Primary-Light) !important;
}

.stop-primary-s,
.stop-primary-s-before:before,
.stop-primary-s-after:after,
.stop-primary-s-hover:hover {
    stop-color: var(--Primary-Strong) !important;
}

.stop-primary-d,
.stop-primary-d-before:before,
.stop-primary-d-after:after,
.stop-primary-d-hover:hover {
    stop-color: var(--Primary-Dark) !important;
}

.stop-primary-f,
.stop-primary-f-before:before,
.stop-primary-f-after:after,
.stop-primary-f-hover:hover {
    stop-color: var(--Primary-Soft) !important;
}

.stop-primary-g,
.stop-primary-g-before:before,
.stop-primary-g-after:after,
.stop-primary-g-hover:hover {
    stop-color: var(--Primary-Ghost) !important;
}

.stop-secondary,
.stop-secondary-before:before,
.stop-secondary-after:after,
.stop-secondary-hover:hover {
    stop-color: var(--Secondary) !important;
}

.stop-secondary-l,
.stop-secondary-l-before:before,
.stop-secondary-l-after:after,
.stop-secondary-l-hover:hover {
    stop-color: var(--Secondary-Light) !important;
}

.stop-secondary-s,
.stop-secondary-s-before:before,
.stop-secondary-s-after:after,
.stop-secondary-s-hover:hover {
    stop-color: var(--Secondary-Strong) !important;
}

.stop-secondary-d,
.stop-secondary-d-before:before,
.stop-secondary-d-after:after,
.stop-secondary-d-hover:hover {
    stop-color: var(--Secondary-Dark) !important;
}

.stop-secondary-f,
.stop-secondary-f-before:before,
.stop-secondary-f-after:after,
.stop-secondary-f-hover:hover {
    stop-color: var(--Secondary-Soft) !important;
}

.stop-secondary-g,
.stop-secondary-g-before:before,
.stop-secondary-g-after:after,
.stop-secondary-g-hover:hover {
    stop-color: var(--Secondary-Ghost) !important;
}

.stop-optional,
.stop-optional-before:before,
.stop-optional-after:after,
.stop-optional-hover:hover {
    stop-color: var(--Optional) !important;
}

.stop-optional-l,
.stop-optional-l-before:before,
.stop-optional-l-after:after,
.stop-optional-l-hover:hover {
    stop-color: var(--Optional-Light) !important;
}

.stop-optional-s,
.stop-optional-s-before:before,
.stop-optional-s-after:after,
.stop-optional-s-hover:hover {
    stop-color: var(--Optional-Strong) !important;
}

.stop-optional-d,
.stop-optional-d-before:before,
.stop-optional-d-after:after,
.stop-optional-d-hover:hover {
    stop-color: var(--Optional-Dark) !important;
}

.stop-optional-f,
.stop-optional-f-before:before,
.stop-optional-f-after:after,
.stop-optional-f-hover:hover {
    stop-color: var(--Optional-Soft) !important;
}

.stop-optional-g,
.stop-optional-g-before:before,
.stop-optional-g-after:after,
.stop-optional-g-hover:hover {
    stop-color: var(--Optional-Ghost) !important;
}

.stop-info,
.stop-info-before:before,
.stop-info-after:after,
.stop-info-hover:hover {
    stop-color: var(--Info) !important;
}

.stop-info-l,
.stop-info-l-before:before,
.stop-info-l-after:after,
.stop-info-l-hover:hover {
    stop-color: var(--Info-Light) !important;
}

.stop-info-s,
.stop-info-s-before:before,
.stop-info-s-after:after,
.stop-info-s-hover:hover {
    stop-color: var(--Info-Strong) !important;
}

.stop-info-d,
.stop-info-d-before:before,
.stop-info-d-after:after,
.stop-info-d-hover:hover {
    stop-color: var(--Info-Dark) !important;
}

.stop-info-f,
.stop-info-f-before:before,
.stop-info-f-after:after,
.stop-info-f-hover:hover {
    stop-color: var(--Info-Soft) !important;
}

.stop-info-g,
.stop-info-g-before:before,
.stop-info-g-after:after,
.stop-info-g-hover:hover {
    stop-color: var(--Info-Ghost) !important;
}

.stop-warning,
.stop-warning-before:before,
.stop-warning-after:after,
.stop-warning-hover:hover {
    stop-color: var(--Warning) !important;
}

.stop-warning-l,
.stop-warning-l-before:before,
.stop-warning-l-after:after,
.stop-warning-l-hover:hover {
    stop-color: var(--Warning-Light) !important;
}

.stop-warning-s,
.stop-warning-s-before:before,
.stop-warning-s-after:after,
.stop-warning-s-hover:hover {
    stop-color: var(--Warning-Strong) !important;
}

.stop-warning-d,
.stop-warning-d-before:before,
.stop-warning-d-after:after,
.stop-warning-d-hover:hover {
    stop-color: var(--Warning-Dark) !important;
}

.stop-warning-f,
.stop-warning-f-before:before,
.stop-warning-f-after:after,
.stop-warning-f-hover:hover {
    stop-color: var(--Warning-Soft) !important;
}

.stop-warning-g,
.stop-warning-g-before:before,
.stop-warning-g-after:after,
.stop-warning-g-hover:hover {
    stop-color: var(--Warning-Ghost) !important;
}

.stop-failed,
.stop-failed-before:before,
.stop-failed-after:after,
.stop-failed-hover:hover {
    stop-color: var(--Failed) !important;
}

.stop-failed-l,
.stop-failed-l-before:before,
.stop-failed-l-after:after,
.stop-failed-l-hover:hover {
    stop-color: var(--Failed-Light) !important;
}

.stop-failed-s,
.stop-failed-s-before:before,
.stop-failed-s-after:after,
.stop-failed-s-hover:hover {
    stop-color: var(--Failed-Strong) !important;
}

.stop-failed-d,
.stop-failed-d-before:before,
.stop-failed-d-after:after,
.stop-failed-d-hover:hover {
    stop-color: var(--Failed-Dark) !important;
}

.stop-failed-f,
.stop-failed-f-before:before,
.stop-failed-f-after:after,
.stop-failed-f-hover:hover {
    stop-color: var(--Failed-Soft) !important;
}

.stop-failed-g,
.stop-failed-g-before:before,
.stop-failed-g-after:after,
.stop-failed-g-hover:hover {
    stop-color: var(--Failed-Ghost) !important;
}

.stop-success,
.stop-success-before:before,
.stop-success-after:after,
.stop-success-hover:hover {
    stop-color: var(--Success) !important;
}

.stop-success-l,
.stop-success-l-before:before,
.stop-success-l-after:after,
.stop-success-l-hover:hover {
    stop-color: var(--Success-Light) !important;
}

.stop-success-s,
.stop-success-s-before:before,
.stop-success-s-after:after,
.stop-success-s-hover:hover {
    stop-color: var(--Success-Strong) !important;
}

.stop-success-d,
.stop-success-d-before:before,
.stop-success-d-after:after,
.stop-success-d-hover:hover {
    stop-color: var(--Success-Dark) !important;
}

.stop-success-f,
.stop-success-f-before:before,
.stop-success-f-after:after,
.stop-success-f-hover:hover {
    stop-color: var(--Success-Soft) !important;
}

.stop-success-g,
.stop-success-g-before:before,
.stop-success-g-after:after,
.stop-success-g-hover:hover {
    stop-color: var(--Success-Ghost) !important;
}

.stop-dark,
.stop-dark-before:before,
.stop-dark-after:after,
.stop-dark-hover:hover {
    stop-color: var(--Dark) !important;
}

.stop-dark-l,
.stop-dark-l-before:before,
.stop-dark-l-after:after,
.stop-dark-l-hover:hover {
    stop-color: var(--Dark-Light) !important;
}

.stop-dark-s,
.stop-dark-s-before:before,
.stop-dark-s-after:after,
.stop-dark-s-hover:hover {
    stop-color: var(--Dark-Strong) !important;
}

.stop-dark-d,
.stop-dark-d-before:before,
.stop-dark-d-after:after,
.stop-dark-d-hover:hover {
    stop-color: var(--Dark-Dark) !important;
}

.stop-dark-f,
.stop-dark-f-before:before,
.stop-dark-f-after:after,
.stop-dark-f-hover:hover {
    stop-color: var(--Dark-Soft) !important;
}

.stop-dark-g,
.stop-dark-g-before:before,
.stop-dark-g-after:after,
.stop-dark-g-hover:hover {
    stop-color: var(--Dark-Ghost) !important;
}

/******************GRID*********************/
.grid {
    --cd-table-bg: transparent;
    --cd-table-accent-bg: transparent;
    --cd-table-header-bg: rgba(var(--Default-Strong_RGBA), 0.5);
    --cd-table-header-merge-bg: rgba(var(--Default-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Default-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Default-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed_RGBA), 0.8);
    --cd-table-disabled-bg: rgba(var(--Default-Strong_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Default-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--Dark-Ghost_RGBA), 0.8);
    --cd-table-header-color: var(--Dark-Light);
    --cd-table-selected-color: var(--Dark-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-disabled-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--Dark-Light);
    border-color: rgba(var(--Default-Soft_RGBA), 0.8);
}
.grid-white {
    --cd-table-bg: transparent;
    --cd-table-accent-bg: transparent;
    --cd-table-header-bg: rgba(var(--White-Strong_RGBA), 0.5);
    --cd-table-header-merge-bg: rgba(var(--White-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--White-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--White-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--White-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--Dark-Ghost_RGBA), 0.8);
    --cd-table-header-color: var(--Dark-Light);
    --cd-table-selected-color: var(--Dark-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--Dark-Light);
    border-color: rgba(var(--Default-Soft_RGBA), 0.8);
}
.grid-dark {
    --cd-table-bg: var(--Dark);
    --cd-table-accent-bg: transparent;
    --cd-table-header-bg: rgba(var(--Dark-Dark_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Dark-Dark_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Dark-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Dark-Strong_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Dark-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--White-Ghost_RGBA), 0.8);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--White-Soft);
    color: var(--Dark-Light);
}
.grid-primary {
    --cd-table-bg: var(--Primary);
    --cd-table-accent-bg: var(--Primary);
    --cd-table-header-bg: rgba(var(--Primary-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Primary-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Primary-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Primary-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Primary-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--White-Ghost_RGBA), 1);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--White-Soft);
    border-color: rgba(var(--Primary-Dark_RGBA), 1);
}
.grid-secondary {
    --cd-table-bg: var(--Secondary);
    --cd-table-accent-bg: var(--Secondary);
    --cd-table-header-bg: rgba(var(--Secondary-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Secondary-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Secondary-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Secondary-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Secondary-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--White-Ghost_RGBA), 1);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--White-Soft);
    border-color: rgba(var(--Secondary-Dark_RGBA), 1);
}
.grid-optional {
    --cd-table-bg: var(--Optional);
    --cd-table-accent-bg: var(--Optional);
    --cd-table-header-bg: rgba(var(--Optional-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Optional-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Optional-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Optional-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Optional-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--Dark-Ghost_RGBA), 1);
    --cd-table-header-color: var(--Dark-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--Dark-Soft);
    border-color: rgba(var(--Optional-Dark_RGBA), 1);
}
.grid-success {
    --cd-table-bg: var(--Success);
    --cd-table-accent-bg: var(--Success);
    --cd-table-header-bg: rgba(var(--Success-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Success-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Success-Ghost_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Success-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Success-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--White-Ghost_RGBA), 1);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--White-Soft);
    border-color: rgba(var(--Success-Dark_RGBA), 1);
}
.grid-info {
    --cd-table-bg: var(--Info);
    --cd-table-accent-bg: var(--Info);
    --cd-table-header-bg: rgba(var(--Info-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Info-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Info-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Info-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Info-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--Dark-Ghost_RGBA), 1);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--Dark-Soft);
    border-color: rgba(var(--Info-Dark_RGBA), 1);
}
.grid-warning {
    --cd-table-bg: var(--Warning);
    --cd-table-accent-bg: var(--Warning);
    --cd-table-header-bg: rgba(var(--Warning-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Warning-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Warning-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Warning-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Failed_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Warning-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--White-Ghost_RGBA), 1);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--White-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--Dark-Soft);
    border-color: rgba(var(--Warning-Dark_RGBA), 1);
}
.grid-failed {
    --cd-table-bg: var(--Failed);
    --cd-table-accent-bg: var(--Failed);
    --cd-table-header-bg: rgba(var(--Failed-Strong_RGBA), 1);
    --cd-table-header-merge-bg: rgba(var(--Failed-Strong_RGBA), 0.4);
    --cd-table-striped-bg: rgba(var(--Failed-Light_RGBA), 0.8);
    --cd-table-selected-bg: rgba(var(--Failed-Dark_RGBA), 0.8);
    --cd-table-deactivate-bg: rgba(var(--Info_RGBA), 0.8);
    --cd-table-hover-bg: rgba(var(--Failed-Soft_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--White-Ghost_RGBA), 1);
    --cd-table-header-color: var(--White-Light);
    --cd-table-selected-color: var(--White-Light);
    --cd-table-deactivate-color: var(--Dark-Dark);
    --cd-table-hover-color: var(--Dark-Soft);
    color: var(--Dark-Soft);
    border-color: rgba(var(--Failed-Dark_RGBA), 1);
}
.grid-outline {
    --cd-table-bg: transparent;
    --cd-table-accent-bg: transparent;
    --cd-table-striped-bg: rgba(var(--White-Light_RGBA), 0.8);
    --cd-table-striped-color: rgba(var(--Dark-Ghost_RGBA), 0.8);
    color: var(--Dark-Light);
}
.grid > :not(caption) > * > * {
    background-color: var(--cd-table-bg);
    box-shadow: var(--cd-table-accent-bg);
}
.grid > thead th {
    color: var(--cd-table-header-color);
    background-color: var(--cd-table-header-bg);
}
.grid > thead.grid-merge-header th {
    background-color: var(--cd-table-header-merge-bg);
    /*background-color: transparent;*/
}
.grid > thead th i {
    background-color: transparent;
}
.grid > tbody > tr.selected {
    --cd-table-bg: transparent;
    color: var(--cd-table-selected-color) !important;
    background-color: var(--cd-table-selected-bg) !important;
}
.grid > tbody > tr.deactivate {
    --cd-table-bg: transparent;
    color: var(--cd-table-deactivate-color) !important;
    background-color: var(--cd-table-deactivate-bg) !important;
}
.grid > tbody > tr.disabled {
    --cd-table-bg: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}
.grid > tbody > tr.subitem {
    --cd-table-bg: transparent;
    color: var(--cd-table-selected-color) !important;
    background-color: var(--cd-table-selected-bg) !important;
}
.grid-striped > tbody > tr:nth-of-type(odd) {
    --cd-table-bg: transparent;
    --cd-table-accent-bg: var(--cd-table-striped-bg);
    color: var(--cd-table-striped-color);
    background-color: var(--cd-table-striped-bg);
}
.grid-hover > tbody > tr:not(.grid-content):hover {
    --cd-table-accent-bg: var(--cd-table-hover-bg);
    --cd-table-bg: transparent;
    color: var(--cd-table-hover-color);
    background-color: var(--cd-table-hover-bg);
}

/********Scroll Bar********/
.scrollbar-default::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Default_RGBA), .5);
}
.scrollbar-default-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Default-Light_RGBA), .5);
}
.scrollbar-default-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Default-Strong_RGBA), .5);
}
.scrollbar-default-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Default-Dark_RGBA), .5);
}
.scrollbar-default-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Default-Soft_RGBA), .5);
}
.scrollbar-default-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Default-Ghost_RGBA), .5);
}

.scrollbar-white::-webkit-scrollbar-thumb {
    background-color: rgba(var(--White_RGBA), .5);
}
.scrollbar-white-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--White-Light_RGBA), .5);
}
.scrollbar-white-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--White-Strong_RGBA), .5);
}
.scrollbar-white-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--White-Dark_RGBA), .5);
}
.scrollbar-white-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--White-Soft_RGBA), .5);
}
.scrollbar-white-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--White-Ghost_RGBA), .5);
}

.scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Dark_RGBA), .5);
}
.scrollbar-dark-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Dark-Light_RGBA), .5);
}
.scrollbar-dark-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Dark-Strong_RGBA), .5);
}
.scrollbar-dark-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Dark-Dark_RGBA), .5);
}
.scrollbar-dark-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Dark-Soft_RGBA), .5);
}
.scrollbar-dark-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Dark-Ghost_RGBA), .5);
}

.scrollbar-primary::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Primary_RGBA), .5);
}
.scrollbar-primary-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Primary-Light_RGBA), .5);
}
.scrollbar-primary-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Primary-Strong_RGBA), .5);
}
.scrollbar-primary-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Primary-Primary_RGBA), .5);
}
.scrollbar-primary-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Primary-Soft_RGBA), .5);
}
.scrollbar-primary-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Primary-Ghost_RGBA), .5) !important;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Secondary_RGBA), .5);
}
.scrollbar-secondary-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Secondary-Light_RGBA), .5);
}
.scrollbar-secondary-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Secondary-Strong_RGBA), .5);
}
.scrollbar-secondary-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Secondary-Secondary_RGBA), .5);
}
.scrollbar-secondary-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Secondary-Soft_RGBA), .5);
}
.scrollbar-secondary-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Secondary-Ghost_RGBA), .5);
}

.scrollbar-optional::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Optional_RGBA), .5);
}
.scrollbar-optional-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Optional-Light_RGBA), .5);
}
.scrollbar-optional-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Optional-Strong_RGBA), .5);
}
.scrollbar-optional-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Optional-Optional_RGBA), .5);
}
.scrollbar-optional-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Optional-Soft_RGBA), .5);
}
.scrollbar-optional-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Optional-Ghost_RGBA), .5);
}

.scrollbar-info::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Info_RGBA), .5);
}
.scrollbar-info-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Info-Light_RGBA), .5);
}
.scrollbar-info-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Info-Strong_RGBA), .5);
}
.scrollbar-info-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Info-Info_RGBA), .5);
}
.scrollbar-info-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Info-Soft_RGBA), .5);
}
.scrollbar-info-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Info-Ghost_RGBA), .5);
}

.scrollbar-failed::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Failed_RGBA), .5);
}
.scrollbar-failed-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Failed-Light_RGBA), .5);
}
.scrollbar-failed-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Failed-Strong_RGBA), .5);
}
.scrollbar-failed-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Failed-Failed_RGBA), .5);
}
.scrollbar-failed-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Failed-Soft_RGBA), .5);
}
.scrollbar-failed-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Failed-Ghost_RGBA), .5);
}

.scrollbar-warning::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Warning_RGBA), .5);
}
.scrollbar-warning-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Warning-Light_RGBA), .5);
}
.scrollbar-warning-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Warning-Strong_RGBA), .5);
}
.scrollbar-warning-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Warning-Warning_RGBA), .5);
}
.scrollbar-warning-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Warning-Soft_RGBA), .5);
}
.scrollbar-warning-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Warning-Ghost_RGBA), .5);
}

.scrollbar-success::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Success_RGBA), .5);
}
.scrollbar-success-l::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Success-Light_RGBA), .5);
}
.scrollbar-success-s::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Success-Strong_RGBA), .5);
}
.scrollbar-success-d::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Success-Success_RGBA), .5);
}
.scrollbar-success-f::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Success-Soft_RGBA), .5);
}
.scrollbar-success-g::-webkit-scrollbar-thumb {
    background-color: rgba(var(--Success-Ghost_RGBA), .5);
}

/********* Ranges *********/
.range-thumb-default > input[type=range]::-webkit-slider-thumb,
.range-thumb-default > input[type=range]:-moz-range-thumb,
.range-thumb-default > input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    border: 1px solid var(--Default-Light);
    background: var(--Default) !important;
    box-shadow: 1px 1px 1px var(--Default-Light), 0px 0px 1px var(--Default-Light);
}
.range-thumb-default > input[type='range'][data-range^="HighRange"]::-webkit-slider-thumb,
.range-thumb-default > input[type='range'][data-range^="HighRange"]:-moz-range-thumb,
.range-default > input[type=range]::-webkit-slider-runnable-track,
.range-default > input[type=range]:-moz-range-track,
.range-default > input[type=range]::-ms-track {
    background: var(--Default) !important;
}
.range-thumb-success > input[type=range]::-webkit-slider-thumb,
.range-thumb-success > input[type=range]:-moz-range-thumb,
.range-thumb-success > input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    border: 1px solid var(--Default-Light);
    background: var(--Success) !important;
    box-shadow: 1px 1px 1px var(--Success-Light), 0px 0px 1px var(--Success-Light);
}
.range-thumb-success > input[type='range'][data-range^="HighRange"]::-webkit-slider-thumb,
.range-thumb-success > input[type='range'][data-range^="HighRange"]:-moz-range-thumb,
.range-success > input[type=range]::-webkit-slider-runnable-track ,
.range-success > input[type=range]:-moz-range-track,
.range-success > input[type=range]::-ms-track {
    background: var(--Success) !important;
}

/********* Hint & Tooltip ************/
.hint-primary[data-tooltip]::after {
    box-shadow: rgba(var(--Primary_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Primary);
    border-top-color: var(--Primary);
}
.hint-primary[data-tooltip]:not([data-direction])::before,
.hint-primary[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Primary);
}
.hint-primary[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Primary);
}
.hint-primary[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Primary);
}
.hint-primary[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Primary);
}
.hint-primary-l[data-tooltip]::after {
    box-shadow: rgba(var(--Primary-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Primary-Light);
    border-top-color: var(--Primary-Light);
}
.hint-primary-l[data-tooltip]:not([data-direction])::before,
.hint-primary-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Primary-Light);
}
.hint-primary-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Primary-Light);
}
.hint-primary-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Primary-Light);
}
.hint-primary-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Primary-Light);
}
.hint-primary-s[data-tooltip]::after {
    box-shadow: rgba(var(--Primary-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Primary-Stong);
    border-top-color: var(--Primary-Stong);
}
.hint-primary-s[data-tooltip]:not([data-direction])::before,
.hint-primary-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Primary-Stong);
}
.hint-primary-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Primary-Stong);
}
.hint-primary-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Primary-Stong);
}
.hint-primary-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Primary-Stong);
}
.hint-primary-d[data-tooltip]::after {
    box-shadow: rgba(var(--Primary-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Primary-Dark);
    border-top-color: var(--Primary-Dark);
}
.hint-primary-d[data-tooltip]:not([data-direction])::before,
.hint-primary-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Primary-Dark);
}
.hint-primary-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Primary-Dark);
}
.hint-primary-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Primary-Dark);
}
.hint-primary-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Primary-Dark);
}
.hint-primary-g[data-tooltip]::after {
    box-shadow: rgba(var(--Primary-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Primary-Ghost);
    border-top-color: var(--Primary-Ghost);
}
.hint-primary-g[data-tooltip]:not([data-direction])::before,
.hint-primary-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Primary-Ghost);
}
.hint-primary-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Primary-Ghost);
}
.hint-primary-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Primary-Ghost);
}
.hint-primary-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Primary-Ghost);
}
.hint-primary-f[data-tooltip]::after {
    box-shadow: rgba(var(--Primary-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Primary-Soft);
    border-top-color: var(--Primary-Soft);
}
.hint-primary-f[data-tooltip]:not([data-direction])::before,
.hint-primary-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Primary-Soft);
}
.hint-primary-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Primary-Soft);
}
.hint-primary-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Primary-Soft);
}
.hint-primary-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Primary-Soft);
}
.hint-secondary[data-tooltip]::after {
    box-shadow: rgba(var(--Secondary_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Secondary);
    border-top-color: var(--Secondary);
}
.hint-secondary[data-tooltip]:not([data-direction])::before,
.hint-secondary[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Secondary);
}
.hint-secondary[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Secondary);
}
.hint-secondary[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Secondary);
}
.hint-secondary[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Secondary);
}
.hint-secondary-l[data-tooltip]::after {
    box-shadow: rgba(var(--Secondary-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Secondary-Light);
    border-top-color: var(--Secondary-Light);
}
.hint-secondary-l[data-tooltip]:not([data-direction])::before,
.hint-secondary-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Secondary-Light);
}
.hint-secondary-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Secondary-Light);
}
.hint-secondary-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Secondary-Light);
}
.hint-secondary-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Secondary-Light);
}
.hint-secondary-s[data-tooltip]::after {
    box-shadow: rgba(var(--Secondary-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Secondary-Stong);
    border-top-color: var(--Secondary-Stong);
}
.hint-secondary-s[data-tooltip]:not([data-direction])::before,
.hint-secondary-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Secondary-Stong);
}
.hint-secondary-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Secondary-Stong);
}
.hint-secondary-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Secondary-Stong);
}
.hint-secondary-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Secondary-Stong);
}
.hint-secondary-d[data-tooltip]::after {
    box-shadow: rgba(var(--Secondary-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Secondary-Dark);
    border-top-color: var(--Secondary-Dark);
}
.hint-secondary-d[data-tooltip]:not([data-direction])::before,
.hint-secondary-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Secondary-Dark);
}
.hint-secondary-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Secondary-Dark);
}
.hint-secondary-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Secondary-Dark);
}
.hint-secondary-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Secondary-Dark);
}
.hint-secondary-g[data-tooltip]::after {
    box-shadow: rgba(var(--Secondary-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Secondary-Ghost);
    border-top-color: var(--Secondary-Ghost);
}
.hint-secondary-g[data-tooltip]:not([data-direction])::before,
.hint-secondary-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Secondary-Ghost);
}
.hint-secondary-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Secondary-Ghost);
}
.hint-secondary-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Secondary-Ghost);
}
.hint-secondary-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Secondary-Ghost);
}
.hint-secondary-f[data-tooltip]::after {
    box-shadow: rgba(var(--Secondary-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Secondary-Soft);
    border-top-color: var(--Secondary-Soft);
}
.hint-secondary-f[data-tooltip]:not([data-direction])::before,
.hint-secondary-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Secondary-Soft);
}
.hint-secondary-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Secondary-Soft);
}
.hint-secondary-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Secondary-Soft);
}
.hint-secondary-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Secondary-Soft);
}
.hint-optional[data-tooltip]::after {
    box-shadow: rgba(var(--Optional_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Optional);
    border-top-color: var(--Optional);
}
.hint-optional[data-tooltip]:not([data-direction])::before,
.hint-optional[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Optional);
}
.hint-optional[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Optional);
}
.hint-optional[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Optional);
}
.hint-optional[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Optional);
}
.hint-optional-l[data-tooltip]::after {
    box-shadow: rgba(var(--Optional-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Optional-Light);
    border-top-color: var(--Optional-Light);
}
.hint-optional-l[data-tooltip]:not([data-direction])::before,
.hint-optional-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Optional-Light);
}
.hint-optional-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Optional-Light);
}
.hint-optional-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Optional-Light);
}
.hint-optional-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Optional-Light);
}
.hint-optional-s[data-tooltip]::after {
    box-shadow: rgba(var(--Optional-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Optional-Stong);
    border-top-color: var(--Optional-Stong);
}
.hint-optional-s[data-tooltip]:not([data-direction])::before,
.hint-optional-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Optional-Stong);
}
.hint-optional-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Optional-Stong);
}
.hint-optional-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Optional-Stong);
}
.hint-optional-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Optional-Stong);
}
.hint-optional-d[data-tooltip]::after {
    box-shadow: rgba(var(--Optional-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Optional-Dark);
    border-top-color: var(--Optional-Dark);
}
.hint-optional-d[data-tooltip]:not([data-direction])::before,
.hint-optional-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Optional-Dark);
}
.hint-optional-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Optional-Dark);
}
.hint-optional-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Optional-Dark);
}
.hint-optional-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Optional-Dark);
}
.hint-optional-g[data-tooltip]::after {
    box-shadow: rgba(var(--Optional-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Optional-Ghost);
    border-top-color: var(--Optional-Ghost);
}
.hint-optional-g[data-tooltip]:not([data-direction])::before,
.hint-optional-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Optional-Ghost);
}
.hint-optional-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Optional-Ghost);
}
.hint-optional-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Optional-Ghost);
}
.hint-optional-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Optional-Ghost);
}
.hint-optional-f[data-tooltip]::after {
    box-shadow: rgba(var(--Optional-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Optional-Soft);
    border-top-color: var(--Optional-Soft);
}
.hint-optional-f[data-tooltip]:not([data-direction])::before,
.hint-optional-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Optional-Soft);
}
.hint-optional-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Optional-Soft);
}
.hint-optional-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Optional-Soft);
}
.hint-optional-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Optional-Soft);
}
.hint-info[data-tooltip]::after {
    box-shadow: rgba(var(--Info_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Info);
    border-top-color: var(--Info);
}
.hint-info[data-tooltip]:not([data-direction])::before,
.hint-info[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Info);
}
.hint-info[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Info);
}
.hint-info[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Info);
}
.hint-info[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Info);
}
.hint-info-l[data-tooltip]::after {
    box-shadow: rgba(var(--Info-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Info-Light);
    border-top-color: var(--Info-Light);
}
.hint-info-l[data-tooltip]:not([data-direction])::before,
.hint-info-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Info-Light);
}
.hint-info-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Info-Light);
}
.hint-info-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Info-Light);
}
.hint-info-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Info-Light);
}
.hint-info-s[data-tooltip]::after {
    box-shadow: rgba(var(--Info-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Info-Stong);
    border-top-color: var(--Info-Stong);
}
.hint-info-s[data-tooltip]:not([data-direction])::before,
.hint-info-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Info-Stong);
}
.hint-info-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Info-Stong);
}
.hint-info-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Info-Stong);
}
.hint-info-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Info-Stong);
}
.hint-info-d[data-tooltip]::after {
    box-shadow: rgba(var(--Info-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Info-Dark);
    border-top-color: var(--Info-Dark);
}
.hint-info-d[data-tooltip]:not([data-direction])::before,
.hint-info-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Info-Dark);
}
.hint-info-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Info-Dark);
}
.hint-info-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Info-Dark);
}
.hint-info-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Info-Dark);
}
.hint-info-g[data-tooltip]::after {
    box-shadow: rgba(var(--Info-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Info-Ghost);
    border-top-color: var(--Info-Ghost);
}
.hint-info-g[data-tooltip]:not([data-direction])::before,
.hint-info-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Info-Ghost);
}
.hint-info-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Info-Ghost);
}
.hint-info-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Info-Ghost);
}
.hint-info-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Info-Ghost);
}
.hint-info-f[data-tooltip]::after {
    box-shadow: rgba(var(--Info-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Info-Soft);
    border-top-color: var(--Info-Soft);
}
.hint-info-f[data-tooltip]:not([data-direction])::before,
.hint-info-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Info-Soft);
}
.hint-info-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Info-Soft);
}
.hint-info-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Info-Soft);
}
.hint-info-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Info-Soft);
}
.hint-failed[data-tooltip]::after {
    box-shadow: rgba(var(--Failed_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Failed);
    border-top-color: var(--Failed);
}
.hint-failed[data-tooltip]:not([data-direction])::before,
.hint-failed[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Failed);
}
.hint-failed[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Failed);
}
.hint-failed[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Failed);
}
.hint-failed[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Failed);
}
.hint-failed-l[data-tooltip]::after {
    box-shadow: rgba(var(--Failed-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Failed-Light);
    border-top-color: var(--Failed-Light);
}
.hint-failed-l[data-tooltip]:not([data-direction])::before,
.hint-failed-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Failed-Light);
}
.hint-failed-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Failed-Light);
}
.hint-failed-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Failed-Light);
}
.hint-failed-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Failed-Light);
}
.hint-failed-s[data-tooltip]::after {
    box-shadow: rgba(var(--Failed-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Failed-Stong);
    border-top-color: var(--Failed-Stong);
}
.hint-failed-s[data-tooltip]:not([data-direction])::before,
.hint-failed-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Failed-Stong);
}
.hint-failed-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Failed-Stong);
}
.hint-failed-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Failed-Stong);
}
.hint-failed-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Failed-Stong);
}
.hint-failed-d[data-tooltip]::after {
    box-shadow: rgba(var(--Failed-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Failed-Dark);
    border-top-color: var(--Failed-Dark);
}
.hint-failed-d[data-tooltip]:not([data-direction])::before,
.hint-failed-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Failed-Dark);
}
.hint-failed-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Failed-Dark);
}
.hint-failed-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Failed-Dark);
}
.hint-failed-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Failed-Dark);
}
.hint-failed-g[data-tooltip]::after {
    box-shadow: rgba(var(--Failed-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Failed-Ghost);
    border-top-color: var(--Failed-Ghost);
}
.hint-failed-g[data-tooltip]:not([data-direction])::before,
.hint-failed-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Failed-Ghost);
}
.hint-failed-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Failed-Ghost);
}
.hint-failed-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Failed-Ghost);
}
.hint-failed-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Failed-Ghost);
}
.hint-failed-f[data-tooltip]::after {
    box-shadow: rgba(var(--Failed-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Failed-Soft);
    border-top-color: var(--Failed-Soft);
}
.hint-failed-f[data-tooltip]:not([data-direction])::before,
.hint-failed-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Failed-Soft);
}
.hint-failed-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Failed-Soft);
}
.hint-failed-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Failed-Soft);
}
.hint-failed-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Failed-Soft);
}
.hint-warning[data-tooltip]::after {
    box-shadow: rgba(var(--Warning_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Warning);
    border-top-color: var(--Warning);
}
.hint-warning[data-tooltip]:not([data-direction])::before,
.hint-warning[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Warning);
}
.hint-warning[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Warning);
}
.hint-warning[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Warning);
}
.hint-warning[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Warning);
}
.hint-warning-l[data-tooltip]::after {
    box-shadow: rgba(var(--Warning-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Warning-Light);
    border-top-color: var(--Warning-Light);
}
.hint-warning-l[data-tooltip]:not([data-direction])::before,
.hint-warning-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Warning-Light);
}
.hint-warning-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Warning-Light);
}
.hint-warning-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Warning-Light);
}
.hint-warning-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Warning-Light);
}
.hint-warning-s[data-tooltip]::after {
    box-shadow: rgba(var(--Warning-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Warning-Stong);
    border-top-color: var(--Warning-Stong);
}
.hint-warning-s[data-tooltip]:not([data-direction])::before,
.hint-warning-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Warning-Stong);
}
.hint-warning-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Warning-Stong);
}
.hint-warning-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Warning-Stong);
}
.hint-warning-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Warning-Stong);
}
.hint-warning-d[data-tooltip]::after {
    box-shadow: rgba(var(--Warning-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Warning-Dark);
    border-top-color: var(--Warning-Dark);
}
.hint-warning-d[data-tooltip]:not([data-direction])::before,
.hint-warning-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Warning-Dark);
}
.hint-warning-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Warning-Dark);
}
.hint-warning-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Warning-Dark);
}
.hint-warning-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Warning-Dark);
}
.hint-warning-g[data-tooltip]::after {
    box-shadow: rgba(var(--Warning-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Warning-Ghost);
    border-top-color: var(--Warning-Ghost);
}
.hint-warning-g[data-tooltip]:not([data-direction])::before,
.hint-warning-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Warning-Ghost);
}
.hint-warning-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Warning-Ghost);
}
.hint-warning-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Warning-Ghost);
}
.hint-warning-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Warning-Ghost);
}
.hint-warning-f[data-tooltip]::after {
    box-shadow: rgba(var(--Warning-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Warning-Soft);
    border-top-color: var(--Warning-Soft);
}
.hint-warning-f[data-tooltip]:not([data-direction])::before,
.hint-warning-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Warning-Soft);
}
.hint-warning-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Warning-Soft);
}
.hint-warning-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Warning-Soft);
}
.hint-warning-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Warning-Soft);
}
.hint-success[data-tooltip]::after {
    box-shadow: rgba(var(--Success_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Success);
    border-top-color: var(--Success);
}
.hint-success[data-tooltip]:not([data-direction])::before,
.hint-success[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Success);
}
.hint-success[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Success);
}
.hint-success[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Success);
}
.hint-success[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Success);
}
.hint-success-l[data-tooltip]::after {
    box-shadow: rgba(var(--Success-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Success-Light);
    border-top-color: var(--Success-Light);
}
.hint-success-l[data-tooltip]:not([data-direction])::before,
.hint-success-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Success-Light);
}
.hint-success-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Success-Light);
}
.hint-success-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Success-Light);
}
.hint-success-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Success-Light);
}
.hint-success-s[data-tooltip]::after {
    box-shadow: rgba(var(--Success-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Success-Stong);
    border-top-color: var(--Success-Stong);
}
.hint-success-s[data-tooltip]:not([data-direction])::before,
.hint-success-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Success-Stong);
}
.hint-success-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Success-Stong);
}
.hint-success-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Success-Stong);
}
.hint-success-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Success-Stong);
}
.hint-success-d[data-tooltip]::after {
    box-shadow: rgba(var(--Success-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Success-Dark);
    border-top-color: var(--Success-Dark);
}
.hint-success-d[data-tooltip]:not([data-direction])::before,
.hint-success-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Success-Dark);
}
.hint-success-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Success-Dark);
}
.hint-success-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Success-Dark);
}
.hint-success-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Success-Dark);
}
.hint-success-g[data-tooltip]::after {
    box-shadow: rgba(var(--Success-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Success-Ghost);
    border-top-color: var(--Success-Ghost);
}
.hint-success-g[data-tooltip]:not([data-direction])::before,
.hint-success-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Success-Ghost);
}
.hint-success-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Success-Ghost);
}
.hint-success-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Success-Ghost);
}
.hint-success-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Success-Ghost);
}
.hint-success-f[data-tooltip]::after {
    box-shadow: rgba(var(--Success-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Success-Soft);
    border-top-color: var(--Success-Soft);
}
.hint-success-f[data-tooltip]:not([data-direction])::before,
.hint-success-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Success-Soft);
}
.hint-success-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Success-Soft);
}
.hint-success-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Success-Soft);
}
.hint-success-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Success-Soft);
}
.hint-dark[data-tooltip]::after {
    box-shadow: rgba(var(--Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Dark);
    border-top-color: var(--Dark);
}
.hint-dark[data-tooltip]:not([data-direction])::before,
.hint-dark[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Dark);
}
.hint-dark[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Dark);
}
.hint-dark[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Dark);
}
.hint-dark[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Dark);
}
.hint-dark-l[data-tooltip]::after {
    box-shadow: rgba(var(--Dark-Light_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Dark-Light);
    border-top-color: var(--Dark-Light);
}
.hint-dark-l[data-tooltip]:not([data-direction])::before,
.hint-dark-l[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Dark-Light);
}
.hint-dark-l[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Dark-Light);
}
.hint-dark-l[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Dark-Light);
}
.hint-dark-l[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Dark-Light);
}
.hint-dark-s[data-tooltip]::after {
    box-shadow: rgba(var(--Dark-Stong_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Dark-Stong);
    border-top-color: var(--Dark-Stong);
}
.hint-dark-s[data-tooltip]:not([data-direction])::before,
.hint-dark-s[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Dark-Stong);
}
.hint-dark-s[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Dark-Stong);
}
.hint-dark-s[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Dark-Stong);
}
.hint-dark-s[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Dark-Stong);
}
.hint-dark-d[data-tooltip]::after {
    box-shadow: rgba(var(--Dark-Dark_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Dark-Dark);
    border-top-color: var(--Dark-Dark);
}
.hint-dark-d[data-tooltip]:not([data-direction])::before,
.hint-dark-d[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Dark-Dark);
}
.hint-dark-d[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Dark-Dark);
}
.hint-dark-d[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Dark-Dark);
}
.hint-dark-d[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Dark-Dark);
}
.hint-dark-g[data-tooltip]::after {
    box-shadow: rgba(var(--Dark-Ghost_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Dark-Ghost);
    border-top-color: var(--Dark-Ghost);
}
.hint-dark-g[data-tooltip]:not([data-direction])::before,
.hint-dark-g[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Dark-Ghost);
}
.hint-dark-g[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Dark-Ghost);
}
.hint-dark-g[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Dark-Ghost);
}
.hint-dark-g[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Dark-Ghost);
}
.hint-dark-f[data-tooltip]::after {
    box-shadow: rgba(var(--Dark-Soft_RGBA), 0.35);
    color: var(--White-Ghost);
    background: var(--Dark-Soft);
    border-top-color: var(--Dark-Soft);
}
.hint-dark-f[data-tooltip]:not([data-direction])::before,
.hint-dark-f[data-tooltip][data-direction^="up"]::before {
    border-top-color: var(--Dark-Soft);
}
.hint-dark-f[data-tooltip][data-direction^="down"]::before {
    border-bottom-color: var(--Dark-Soft);
}
.hint-dark-f[data-tooltip][data-direction^="left"]::before {
    border-left-color: var(--Dark-Soft);
}
.hint-dark-f[data-tooltip][data-direction^="right"]::before {
    border-right-color: var(--Dark-Soft);
}