/* ------------------- Basekit Framework · Text Fev . 2022 © Exactuflow http://basekit.exactusensu.pt Table of Contents · Configs · Font . Size . Standard · Font . Size . Percent · Font . Weights · Font · Font . Size · Font . Family · Font . Weight · Font . Style · Text · Text . Reset · Text . Links · Text · Colors · Text · Effects · Text · Operations · Paragraphs · Paragraphs . Default · Paragraphs . Types ------------------- */ /* Configs */ html { /* Configs . Font . Size */ /* Configs . Font . Size . Standard */ --fs_null: 0px; --fs_tiny: calc(1px * (var(--text_size) * var(--text_scale_tiny))); --fs_small: calc(1px * (var(--text_size) * var(--text_scale_small))); --fs_default: calc(1px * (var(--text_size) * var(--text_scale_default))); --fs_medium: calc(1px * (var(--text_size) * var(--text_scale_medium))); --fs_large: calc(1px * (var(--text_size) * var(--text_scale_large))); --fs_huge: calc(1px * (var(--text_size) * var(--text_scale_huge))); /* Configs . Font . Size . Percent */ --fs_300: calc(1px * (var(--text_size) * 3.0)); --fs_350: calc(1px * (var(--text_size) * 3.5)); --fs_360: calc(1px * (var(--text_size) * 3.6)); --fs_370: calc(1px * (var(--text_size) * 3.7)); --fs_380: calc(1px * (var(--text_size) * 3.8)); --fs_390: calc(1px * (var(--text_size) * 3.9)); --fs_400: calc(1px * (var(--text_size) * 4.0)); --fs_500: calc(1px * (var(--text_size) * 5.0)); --fs_600: calc(1px * (var(--text_size) * 6.0)); --fs_700: calc(1px * (var(--text_size) * 7.0)); --fs_800: calc(1px * (var(--text_size) * 8.0)); --fs_900: calc(1px * (var(--text_size) * 9.0)); --fs_1000: calc(1px * (var(--text_size) * 10)); /* Configs . Font . Weights */ --fw_thin: 100; --fw_extra_light: 200; --fw_light: 300; --fw_regular: 400; --fw_medium: 500; --fw_bold: 600; --fw_black: 700; --fw_ultra: 800; /* Configs . Font . Line heights . Standard */ --lh_null: 0px; --lh_tiny: calc(1px * ((var(--text_size) * var(--text_scale_tiny)) + 10)); --lh_small: calc(1px * ((var(--text_size) * var(--text_scale_small)) + 3)); --lh_default: calc(1px * ((var(--text_size) * var(--text_scale_default)) + 4)); --lh_medium: calc(1px * ((var(--text_size) * var(--text_scale_medium)) + 6)); --lh_large: calc(1px * ((var(--text_size) * var(--text_scale_large)) + 10)); --lh_huge: calc(1px * ((var(--text_size) * var(--text_scale_huge)) + 10) ); /* Configs . Font . Line heights . Percent */ --lh_300: calc(1px * ((var(--text_size) * 3.0) + 10)); --lh_350: calc(1px * ((var(--text_size) * 3.5) + 10)); --lh_360: calc(1px * ((var(--text_size) * 3.6) + 10)); --lh_370: calc(1px * ((var(--text_size) * 3.7) + 10)); --lh_380: calc(1px * ((var(--text_size) * 3.8) + 10)); --lh_390: calc(1px * ((var(--text_size) * 3.9) + 10)); --lh_400: calc(1px * ((var(--text_size) * 4.0) + 10)); --lh_500: calc(1px * ((var(--text_size) * 5.0) + 10)); --lh_600: calc(1px * ((var(--text_size) * 6.0) + 10)); --lh_700: calc(1px * ((var(--text_size) * 7.0) + 10)); --lh_800: calc(1px * ((var(--text_size) * 8.0) + 10)); --lh_900: calc(1px * ((var(--text_size) * 9.0) + 10)); --lh_1000: calc(1px * ((var(--text_size) * 10) + 10)); } /* Font */ /* Font . Size */ /* Font . Size . Body */ body { font-size: calc(1px * var(--font_size)); line-height: var(--lh_default); } /* Font . Size . Standard */ .fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } /* Font . Size . Extra small screens */ @media (min-width: 100px) { /* Screen size specific overides */ /* Font . Size . Standard */ .xs-fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .xs-fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .xs-fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .xs-fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .xs-fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .xs-fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .xs-fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .xs-fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .xs-fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .xs-fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .xs-fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .xs-fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .xs-fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .xs-fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .xs-fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .xs-fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .xs-fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .xs-fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .xs-fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .xs-fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } } /* Font . Size . Small screens */ @media (min-width: 768px) { /* Screen size specific resets */ /* Font . Size . Standard */ .fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } /* Screen size specific overides */ /* Font . Size . Standard */ .sm-fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .sm-fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .sm-fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .sm-fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .sm-fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .sm-fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .sm-fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .sm-fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .sm-fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .sm-fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .sm-fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .sm-fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .sm-fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .sm-fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .sm-fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .sm-fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .sm-fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .sm-fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .sm-fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .sm-fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } } /* Font . Size . Medium screens */ @media (min-width: 990px) { /* Screen size specific resets */ /* Font . Size . Standard */ .fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } /* Screen size specific overides */ /* Font . Size . Standard */ .md-fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .md-fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .md-fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .md-fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .md-fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .md-fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .md-fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .md-fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .md-fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .md-fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .md-fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .md-fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .md-fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .md-fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .md-fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .md-fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .md-fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .md-fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .md-fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .md-fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } } /* Font . Size . Large screens */ @media (min-width: 1200px) { /* Screen size specific resets */ /* Font . Size . Standard */ .fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } /* Screen size specific overides */ /* Font . Size . Standard */ .lg-fs_null { font-size: var(--fs_null) !important; line-height: var(--lh_null) !important; } .lg-fs_tiny { font-size: var(--fs_tiny) !important; line-height: var(--lh_tiny) !important; } .lg-fs_small { font-size: var(--fs_small) !important; line-height: var(--lh_small) !important; } .lg-fs_default { font-size: var(--fs_default) !important; line-height: var(--lh_default) !important; } .lg-fs_medium { font-size: var(--fs_medium) !important; line-height: var(--lh_medium) !important; } .lg-fs_large { font-size: var(--fs_large) !important; line-height: var(--lh_large) !important; } .lg-fs_huge { font-size: var(--fs_huge) !important; line-height: var(--lh_huge) !important; } /* Font . Size . Percent */ .lg-fs_300 { font-size: var(--fs_300) !important; line-height: var(--lh_300) !important; } .lg-fs_350 { font-size: var(--fs_350) !important; line-height: var(--lh_350) !important; } .lg-fs_360 { font-size: var(--fs_360) !important; line-height: var(--lh_360) !important; } .lg-fs_370 { font-size: var(--fs_370) !important; line-height: var(--lh_370) !important; } .lg-fs_380 { font-size: var(--fs_380) !important; line-height: var(--lh_380) !important; } .lg-fs_390 { font-size: var(--fs_390) !important; line-height: var(--lh_390) !important; } .lg-fs_400 { font-size: var(--fs_400) !important; line-height: var(--lh_400) !important; } .lg-fs_500 { font-size: var(--fs_500) !important; line-height: var(--lh_500) !important; } .lg-fs_600 { font-size: var(--fs_600) !important; line-height: var(--lh_600) !important; } .lg-fs_700 { font-size: var(--fs_700) !important; line-height: var(--lh_700) !important; } .lg-fs_800 { font-size: var(--fs_800) !important; line-height: var(--lh_800) !important; } .lg-fs_900 { font-size: var(--fs_900) !important; line-height: var(--lh_900) !important; } .lg-fs_1000 { font-size: var(--fs_1000) !important; line-height: var(--lh_1000) !important; } } /* Font . Family */ /* Font . Family . Default */ body { font-family: var(--font_family); } /* Font . Family . Gotham */ .ff_gotham { font-family: "gotham" !important; } /* Font . Family . BasekitSymbols */ .ff_exactusymbols { font-family: ExactuSymbols !important; } /* Font . Family . BasekitSymbols */ .ff_basekitsymbols { font-family: BasekitSymbols !important; } /* Font . Family . PaperIcons */ .ff_papericons { font-family: PaperIcons !important; } /* Font . Weight */ /* Font . Weight . Default */ .fw_thin { font-weight: var(--fw_thin); } .fw_extra_light { font-weight: var(--fw_extra_light); } .fw_light { font-weight: var(--fw_light); } .fw_regular { font-weight: var(--fw_regular); } .fw_medium { font-weight: var(--fw_medium); } .fw_bold { font-weight: var(--fw_bold); } .fw_black { font-weight: var(--fw_black); } .fw_ultra { font-weight: var(--fw_ultra); } /* Font . Weight . Extra small screens */ @media (min-width: 10px) { /* Screen size specific overides */ .xs-fw_thin { font-weight: var(--fw_thin) !important; } .xs-fw_extra_light { font-weight: var(--fw_extra_light) !important; } .xs-fw_light { font-weight: var(--fw_light) !important; } .xs-fw_regular { font-weight: var(--fw_regular) !important; } .xs-fw_medium { font-weight: var(--fw_medium) !important; } .xs-fw_bold { font-weight: var(--fw_bold) !important; } .xs-fw_black { font-weight: var(--fw_black) !important; } .xs-fw_ultra { font-weight: var(--fw_ultra) !important; } } /* Font . Weight . Small screens */ @media (min-width: 768px) { /* Screen size specific resets */ .fw_thin { font-weight: var(--fw_thin) !important; } .fw_extra_light { font-weight: var(--fw_extra_light) !important; } .fw_light { font-weight: var(--fw_light) !important; } .fw_regular { font-weight: var(--fw_regular) !important; } .fw_medium { font-weight: var(--fw_medium) !important; } .fw_bold { font-weight: var(--fw_bold) !important; } .fw_black { font-weight: var(--fw_black) !important; } .fw_ultra { font-weight: var(--fw_ultra) !important; } /* Screen size specific overides */ .sm-fw_thin { font-weight: var(--fw_thin) !important; } .sm-fw_extra_light { font-weight: var(--fw_extra_light) !important; } .sm-fw_ligh { font-weight: var(--fw_light) !important; } .sm-fw_regular { font-weight: var(--fw_regular) !important; } .sm-fw_medium { font-weight: var(--fw_medium) !important; } .sm-fw_bold { font-weight: var(--fw_bold) !important; } .sm-fw_black { font-weight: var(--fw_black) !important; } .sm-fw_ultra { font-weight: var(--fw_ultra) !important; } } /* Font . Weight . Medium screens */ @media (min-width: 990px) { /* Screen size specific resets */ .fw_thin { font-weight: var(--fw_thin) !important; } .fw_extra_light { font-weight: var(--fw_extra_light) !important; } .fw_light { font-weight: var(--fw_light) !important; } .fw_regular { font-weight: var(--fw_regular) !important; } .fw_medium { font-weight: var(--fw_medium) !important; } .fw_bold { font-weight: var(--fw_bold) !important; } .fw_black { font-weight: var(--fw_black) !important; } .fw_ultra { font-weight: var(--fw_ultra) !important; } /* Screen size specific overides */ .md-fw_thin { font-weight: var(--fw_thin) !important; } .md-fw_extra_light { font-weight: var(--fw_extra_light) !important; } .md-fw_light { font-weight: var(--fw_light) !important; } .md-fw_regular { font-weight: var(--fw_regular) !important; } .md-fw_medium { font-weight: var(--fw_medium) !important; } .md-fw_bold { font-weight: var(--fw_bold) !important; } .md-fw_black { font-weight: var(--fw_black) !important; } .md-fw_ultra { font-weight: var(--fw_ultra) !important; } } /* Font . Weight . Large screens */ @media (min-width: 1200px) { /* Screen size specific resets */ .fw_thin { font-weight: var(--fw_thin) !important; } .fw_extra_light { font-weight: var(--fw_extra_light) !important; } .fw_light { font-weight: var(--fw_light) !important; } .fw_regular { font-weight: var(--fw_regular) !important; } .fw_medium { font-weight: var(--fw_medium) !important; } .fw_bold { font-weight: var(--fw_bold) !important; } .fw_black { font-weight: var(--fw_black) !important; } .fw_ultra { font-weight: var(--fw_ultra) !important; } /* Screen size specific overides */ .lg-fw_thin { font-weight: var(--fw_thin) !important; } .lg-fw_extra_light { font-weight: var(--fw_extra_light) !important; } .lg-fw_light { font-weight: var(--fw_light) !important; } .lg-fw_regular { font-weight: var(--fw_regular) !important; } .lg-fw_medium { font-weight: var(--fw_medium) !important; } .lg-fw_bold { font-weight: var(--fw_bold) !important; } .lg-fw_black { font-weight: var(--fw_black) !important; } .lg-fw_ultra { font-weight: var(--fw_ultra) !important; } } /* Font . Style */ /* Font . Style . Default */ .fs_italic { font-style: italic; } /* Font . Style . Extra small screens */ @media (min-width: 10px) { /* Screen size specific overides */ .xs-fs_italic { font-style: italic !important; } } /* Font . Style . Small screens */ @media (min-width: 768px) { /* Screen size specific resets */ .fs_italic { font-style: italic !important; } /* Screen size specific overides */ .sm-fs_italic { font-style: italic !important; } } /* Font . Style . Medium screens */ @media (min-width: 990px) { /* Screen size specific resets */ .fs_italic { font-style: italic !important; } /* Screen size specific overides */ .md-fs_italic { font-style: italic !important; } } /* Font . Style . Large screens */ @media (min-width: 1200px) { /* Screen size specific resets */ .fs_italic { font-style: italic !important; } /* Screen size specific overides */ .lg-fs_italic { font-style: italic !important; } } /* Text */ /* Text . Reset */ h1, h2, h3, h4, h5, h6, p, span { margin: 0px; padding: 0px; list-style: none; } /* Text . Links */ a { color: var(--color_links); text-decoration: none; transition: 0.2s filter ease-in-out; } a:hover { filter: brightness(130%); } a.disabled, a.disabled:hover{ color: var(--color_grey_light); cursor: default; } /* Text . Line height */ /* Configs . Font . Line heights . Standard */ lh_null { line-height: var(--lh_null);} lh_small { line-height: var(--lh_small);} lh_default { line-height: var(--lh_default);} lh_medium { line-height: var(--lh_medium);} lh_large { line-height: var(--lh_large);} lh_huge { line-height: var(--lh_huge);} /* Configs . Font . Line heights . Percent */ lh_300 { line-height: var(--lh_300); } lh_350 { line-height: var(--lh_350); } lh_360 { line-height: var(--lh_360); } lh_370 { line-height: var(--lh_370); } lh_380 { line-height: var(--lh_380); } lh_390 { line-height: var(--lh_390); } lh_400 { line-height: var(--lh_400); } lh_500 { line-height: var(--lh_500); } lh_600 { line-height: var(--lh_600); } lh_700 { line-height: var(--lh_700); } lh_800 { line-height: var(--lh_800); } lh_900 { line-height: var(--lh_900); } lh_1000 { line-height: var(--lh_1000); } /* Text . Alignment */ /* Text . Alignment . Default */ .ta_left { text-align: left !important; } .ta_center { text-align: center !important; } .ta_right { text-align: right !important; } /* Text . Alignment . Extra small screens */ @media (min-width: 10px) { /* Text align */ .xs-ta_left { text-align: left !important; } .xs-ta_center { text-align: center !important; } .xs-ta_right { text-align: right !important; } } /* Text . Alignment . Small screens */ @media (min-width: 768px) { /* Reset */ .xs-ta_left, .xs-ta_center, .xs-ta_right { text-align: inherit !important; } /* Text align */ .sm-ta_left { text-align: left !important; } .sm-ta_center { text-align: center !important; } .sm-ta_right { text-align: right !important; } } /* Text . Alignment . Medium screens */ @media (min-width: 990px) { /* Reset */ .xs-ta_left, .xs-ta_center, .xs-ta_right, .sm-ta_left, .sm-ta_center, .sm-ta_right { text-align: inherit !important; } /* Text align */ .md-ta_left { text-align: left !important; } .md-ta_center { text-align: center !important; } .md-ta_right { text-align: right !important; } } /* Text . Alignment . Large screens */ @media (min-width: 1200px) { /* Reset */ .xs-ta_left, .xs-ta_center, .xs-ta_right, .sm-ta_left, .sm-ta_center, .sm-ta_right, .md-ta_left, .md-ta_center, .md-ta_right { text-align: inherit !important; } /* Text align */ .lg-ta_left { text-align: left !important; } .lg-ta_center { text-align: center !important; } .lg-ta_right { text-align: right !important; } } /* Text . Colors */ /* Text . Colors . Body */ body { color: var(--color_text); } /* Text . Colors . Base */ .tc_primary { color: var(--color_primary) !important; } .tc_secondary { color: var(--color_secondary) !important; } .tc_text { color: var(--color_text) !important; } .tc_links { color: var(--color_links) !important; } /* Text . Colors . Default */ .tc_red { color: var(--color_red) !important; } .tc_green { color: var(--color_green) !important; } .tc_blue { color: var(--color_blue) !important; } .tc_orange { color: var(--color_orange) !important; } .tc_yellow { color: var(--color_yellow) !important; } .tc_grey, .tc_gray { color: var(--color_grey) !important; } .tc_black { color: var(--color_black) !important; } .tc_white { color: var(--color_white) !important; } /* Text . Colors . Light */ .tc_red_light { color: var(--color_red_light) !important; } .tc_green_light { color: var(--color_green_light) !important; } .tc_blue_light { color: var(--color_blue_light) !important; } .tc_orange_light { color: var(--color_orange_light) !important; } .tc_yellow_light { color: var(--color_yellow_light) !important; } .tc_grey_light, .tc_gray_light { color: var(--color_grey_light) !important; } .tc_black_light { color: var(--color_black_light) !important; } .tc_white_light { color: var(--color_white_light) !important; } /* Text . Colors . Medium */ .tc_red_medium { color: var(--color_red_medium) !important; } .tc_green_medium { color: var(--color_green_medium) !important; } .tc_blue_medium { color: var(--color_blue_medium) !important; } .tc_orange_medium { color: var(--color_orange_medium) !important; } .tc_yellow_medium { color: var(--color_yellow_medium) !important; } .tc_grey_medium, .tc_gray_medium { color: var(--color_grey_medium) !important; } .tc_black_medium { color: var(--color_black_medium) !important; } .tc_white_medium { color: var(--color_white_medium) !important; } /* Text . Colors . Dark */ .tc_red_dark { color: var(--color_red_dark) !important; } .tc_green_dark { color: var(--color_green_dark) !important; } .tc_blue_dark { color: var(--color_blue_dark) !important; } .tc_orange_dark { color: var(--color_orange_dark) !important; } .tc_yellow_dark { color: var(--color_yellow_dark) !important; } .tc_grey_dark, .tc_gray_dark { color: var(--color_grey_dark) !important; } .tc_black_dark { color: var(--color_black_dark) !important; } .tc_white_dark { color: var(--color_white_dark) !important; } /* Text . Effects */ /* Text . Effects . Uppercase */ .te_uppercase { text-transform: uppercase; } /* Text . Effects . Highlight */ /* Text . Effects . Highlight . Default */ *[class^="te_highlight"] { display: inline-block; padding: 0px 4px 0px 4px; color: var(--color_white); background-color: var(--color_primary); } /* Text . Effects . Highlight . Base */ .te_highlight_primary { background-color: var(--color_primary) !important; } .te_highlight_secondary { background-color: var(--color_secondary) !important; } /* Text . Effects . Highlight . Colors . Default */ .te_highlight_red { background-color: var(--color_red) !important; } .te_highlight_green { background-color: var(--color_green) !important; } .te_highlight_blue { background-color: var(--color_blue) !important; } .te_highlight_orange { background-color: var(--color_orange) !important; } .te_highlight_yellow { cobackground-colorlor: var(--color_yellow) !important; } .te_highlight_grey, .te_highlight_gray { background-color: var(--color_grey) !important; } .te_highlight_black { background-color: var(--color_black) !important; } .te_highlight_white { background-color: var(--color_white) !important; color: var(--color_text) !important; } /* Text . Effects . Highlight . Colors . Light */ .te_highlight_red_light { background-color: var(--color_red_light) !important; } .te_highlight_green_light { background-color: var(--color_green_light) !important; } .te_highlight_blue_light { background-color: var(--color_blue_light) !important; } .te_highlight_orange_light { background-color: var(--color_orange_light) !important; } .te_highlight_yellow_light { background-color: var(--color_yellow_light) !important; } .te_highlight_grey_light, .te_highlight_gray_light { background-color: var(--color_grey_light) !important; } .te_highlight_black_light { background-color: var(--color_black_light) !important; } .te_highlight_white_light { background-color: var(--color_white_light) !important; color: var(--color_text) !important; } /* Text . Effects . Highlight . Colors . Medium */ .te_highlight_red_medium { cobackground-colorlor: var(--color_red_medium) !important; } .te_highlight_green_medium { background-color: var(--color_green_medium) !important; } .te_highlight_blue_medium { background-color: var(--color_blue_medium) !important; } .te_highlight_orange_medium { background-color: var(--color_orange_medium) !important; } .te_highlight_yellow_medium { background-color: var(--color_yellow_medium) !important; } .te_highlight_grey_medium, .te_highlight_gray_medium { background-color: var(--color_grey_medium) !important; } .te_highlight_black_medium { background-color: var(--color_black_medium) !important; } .te_highlight_white_medium { background-color: var(--color_white_medium) !important; color: var(--color_text) !important; } /* Text . Effects . Highlight . Colors . Dark */ .te_highlight_red_dark { background-color: var(--color_red_dark) !important; } .te_highlight_green_dark { background-color: var(--color_green_dark) !important; } .te_highlight_blue_dark { background-color: var(--color_blue_dark) !important; } .te_highlight_orange_dark { background-color: var(--color_orange_dark) !important; } .te_highlight_yellow_dark { background-color: var(--color_yellow_dark) !important; } .te_highlight_grey_dark, .te_highlight_gray_dark { background-color: var(--color_grey_dark) !important; } .te_highlight_black_dark { background-color: var(--color_black_dark) !important; } .te_highlight_white_dark { background-color: var(--color_white_dark) !important; color: var(--color_text) !important; } /* Text . Effects . Underline */ .te_underlined, .te_hover_underlined, .te_underdotted, .te_hover_underdotted, .te_underdashed, .te_hover_underdashed{ border-bottom-width: 1px; } /* Text . Effects . Underline . Solid */ .te_underlined, .te_hover_underlined:hover{ border-bottom-style: solid; } /* Text . Effects . Underline . Dotted */ .te_underdotted, .te_hover_underdotted:hover{ border-bottom-style: dotted; } /* Text . Effects . Underline . Dashed */ .te_underdashed, .te_hover_underdashed:hover{ border-bottom-style: dashed; } /* Text . Effects . Underline . Colors */ .te_underlined, .te_underdotted, .te_underdashed, .te_hover_underlined:hover, .te_hover_underdotted:hover, .te_hover_underdashed:hover { border-bottom-color: var(--color_text); } a.te_underlined, a.te_underdotted, a.te_underdashed, a.te_hover_underlined:hover, a.te_hover_underdotted:hover, a.te_hover_underdashed:hover { border-bottom-color: var(--color_links)} .te_underlined.tc_primary, .te_underdotted.tc_primary, .te_underdashed.tc_primary, .te_hover_underlined.tc_primary:hover, .te_hover_underdotted.tc_primary:hover, .te_hover_underdashed.tc_primary:hover { border-bottom-color: var(--color_primary); } .te_underlined.tc_secondary, .te_underdotted.tc_secondary, .te_underdashed.tc_secondary, .te_hover_underlined.tc_secondary:hover, .te_hover_underdotted.tc_secondary:hover, .te_hover_underdashed.tc_secondary:hover { border-bottom-color: var(--color_secondary); } .te_underlined.tc_red, .te_underdotted.tc_red, .te_underdashed.tc_red, .te_hover_underlined.tc_red:hover, .te_hover_underdotted.tc_red:hover, .te_hover_underdashed.tc_red:hover { border-bottom-color: var(--color_red); } .te_underlined.tc_green, .te_underdotted.tc_green, .te_underdashed.tc_green, .te_hover_underlined.tc_green:hover, .te_hover_underdotted.tc_green:hover, .te_hover_underdashed.tc_green:hover { border-bottom-color: var(--color_green); } .te_underlined.tc_blue, .te_underdotted.tc_blue, .te_underdashed.tc_blue, .te_hover_underlined.tc_blue:hover, .te_hover_underdotted.tc_blue:hover, .te_hover_underdashed.tc_blue:hover { border-bottom-color: var(--color_blue); } .te_underlined.tc_orange, .te_underdotted.tc_orange, .te_underdashed.tc_orange, .te_hover_underlined.tc_orange:hover, .te_hover_underdotted.tc_orange:hover, .te_hover_underdashed.tc_orange:hover { border-bottom-color: var(--color_orange); } .te_underlined.tc_yellow, .te_underdotted.tc_yellow, .te_underdashed.tc_yellow, .te_hover_underlined.tc_yellow:hover, .te_hover_underdotted.tc_yellow:hover, .te_hover_underdashed.tc_yellow:hover { border-bottom-color: var(--color_yellow); } .te_underlined.tc_grey, .te_underdotted.tc_grey, .te_underdashed.tc_grey, .te_hover_underlined.tc_grey:hover, .te_hover_underdotted.tc_grey:hover, .te_hover_underdashed.tc_grey:hover { border-bottom-color: var(--color_grey); } .te_underlined.tc_black, .te_underdotted.tc_black, .te_underdashed.tc_black, .te_hover_underlined.tc_black:hover, .te_hover_underdotted.tc_black:hover, .te_hover_underdashed.tc_black:hover { border-bottom-color: var(--color_black); } .te_underlined.tc_white, .te_underdotted.tc_white, .te_underdashed.tc_white, .te_hover_underlined.tc_white:hover, .te_hover_underdotted.tc_white:hover, .te_hover_underdashed.tc_white:hover { border-bottom-color: var(--color_white); } .te_underlined.tc_red_dark, .te_underdotted.tc_red_dark, .te_underdashed.tc_red_dark, .te_hover_underlined.tc_red_dark:hover, .te_hover_underdotted.tc_red_dark:hover, .te_hover_underdashed.tc_red_dark:hover { border-bottom-color: var(--color_red_dark); } .te_underlined.tc_green_dark, .te_underdotted.tc_green_dark, .te_underdashed.tc_green_dark, .te_hover_underlined.tc_green_dark:hover, .te_hover_underdotted.tc_green_dark:hover, .te_hover_underdashed.tc_green_dark:hover { border-bottom-color: var(--color_green_dark); } .te_underlined.tc_blue_dark, .te_underdotted.tc_blue_dark, .te_underdashed.tc_blue_dark, .te_hover_underlined.tc_blue_dark:hover, .te_hover_underdotted.tc_blue_dark:hover, .te_hover_underdashed.tc_blue_dark:hover { border-bottom-color: var(--color_blue_dark); } .te_underlined.tc_orange_dark, .te_underdotted.tc_orange_dark, .te_underdashed.tc_orange_dark, .te_hover_underlined.tc_orange_dark:hover, .te_hover_underdotted.tc_orange_dark:hover, .te_hover_underdashed.tc_orange_dark:hover { border-bottom-color: var(--color_orange_dark); } .te_underlined.tc_yellow_dark, .te_underdotted.tc_yellow_dark, .te_underdashed.tc_yellow_dark, .te_hover_underlined.tc_yellow_dark:hover, .te_hover_underdotted.tc_yellow_dark:hover, .te_hover_underdashed.tc_yellow_dark:hover { border-bottom-color: var(--color_yellow_dark); } .te_underlined.tc_grey_dark, .te_underdotted.tc_grey_dark, .te_underdashed.tc_grey_dark, .te_hover_underlined.tc_grey_dark:hover, .te_hover_underdotted.tc_grey_dark:hover, .te_hover_underdashed.tc_grey_dark:hover { border-bottom-color: var(--color_grey_dark); } .te_underlined.tc_black_dark, .te_underdotted.tc_black_dark, .te_underdashed.tc_black_dark, .te_hover_underlined.tc_black_dark:hover, .te_hover_underdotted.tc_black_dark:hover, .te_hover_underdashed.tc_black_dark:hover { border-bottom-color: var(--color_black_dark); } .te_underlined.tc_white_dark, .te_underdotted.tc_white_dark, .te_underdashed.tc_white_dark, .te_hover_underlined.tc_white_dark:hover, .te_hover_underdotted.tc_white_dark:hover, .te_hover_underdashed.tc_white_dark:hover { border-bottom-color: var(--color_white_dark); } .te_underlined.tc_red_medium, .te_underdotted.tc_red_medium, .te_underdashed.tc_red_medium, .te_hover_underlined.tc_red_medium:hover, .te_hover_underdotted.tc_red_medium:hover, .te_underdashed.tc_red_medium:hover { border-bottom-color: var(--color_red_medium); } .te_underlined.tc_green_medium, .te_underdotted.tc_green_medium, .te_underdashed.tc_green_medium, .te_hover_underlined.tc_green_medium:hover, .te_hover_underdotted.tc_green_medium:hover, .te_underdashed.tc_green_medium:hover { border-bottom-color: var(--color_green_medium); } .te_underlined.tc_blue_medium, .te_underdotted.tc_blue_medium, .te_underdashed.tc_blue_medium, .te_hover_underlined.tc_blue_medium:hover, .te_hover_underdotted.tc_blue_medium:hover, .te_underdashed.tc_blue_medium:hover { border-bottom-color: var(--color_blue_medium); } .te_underlined.tc_orange_medium, .te_underdotted.tc_orange_medium, .te_underdashed.tc_orange_medium, .te_hover_underlined.tc_orange_medium:hover, .te_hover_underdotted.tc_orange_medium:hover, .te_underdashed.tc_orange_medium:hover { border-bottom-color: var(--color_orange_medium); } .te_underlined.tc_yellow_medium, .te_underdotted.tc_yellow_medium, .te_underdashed.tc_yellow_medium, .te_hover_underlined.tc_yellow_medium:hover, .te_hover_underdotted.tc_yellow_medium:hover, .te_underdashed.tc_yellow_medium:hover { border-bottom-color: var(--color_yellow_medium); } .te_underlined.tc_grey_medium, .te_underdotted.tc_grey_medium, .te_underdashed.tc_grey_medium, .te_hover_underlined.tc_grey_medium:hover, .te_hover_underdotted.tc_grey_medium:hover, .te_underdashed.tc_grey_medium:hover { border-bottom-color: var(--color_grey_medium)} .te_underlined.tc_black_medium, .te_underdotted.tc_black_medium, .te_underdashed.tc_black_medium, .te_hover_underlined.tc_black_medium:hover, .te_hover_underdotted.tc_black_medium:hover, .te_underdashed.tc_black_medium:hover { border-bottom-color: var(--color_black_medium); } .te_underlined.tc_white_medium, .te_underdotted.tc_white_medium, .te_underdashed.tc_white_medium, .te_hover_underlined.tc_white_medium:hover, .te_hover_underdotted.tc_white_medium:hover, .te_underdashed.tc_white_medium:hover { border-bottom-color: var(--color_white_medium); } .te_underlined.tc_red_light, .te_underdotted.tc_red_light, .te_underdashed.tc_red_light, .te_hover_underlined.tc_red_light:hover, .te_hover_underdotted.tc_red_light:hover, .te_underdashed.tc_red_light:hover { border-bottom-color: var(--color_red_light); } .te_underlined.tc_green_light, .te_underdotted.tc_green_light, .te_underdashed.tc_green_light, .te_hover_underlined.tc_green_light:hover, .te_hover_underdotted.tc_green_light:hover, .te_underdashed.tc_green_light:hover { border-bottom-color: var(--color_green_light); } .te_underlined.tc_blue_light, .te_underdotted.tc_blue_light, .te_underdashed.tc_blue_light, .te_hover_underlined.tc_blue_light:hover, .te_hover_underdotted.tc_blue_light:hover, .te_underdashed.tc_blue_light:hover { border-bottom-color: var(--color_blue_light); } .te_underlined.tc_orange_light, .te_underdotted.tc_orange_light, .te_underdashed.tc_orange_light, .te_hover_underlined.tc_orange_light:hover, .te_hover_underdotted.tc_orange_light:hover, .te_underdashed.tc_orange_light:hover { border-bottom-color: var(--color_orange_light); } .te_underlined.tc_yellow_light, .te_underdotted.tc_yellow_light, .te_underdashed.tc_yellow_light, .te_hover_underlined.tc_yellow_light:hover, .te_hover_underdotted.tc_yellow_light:hover, .te_underdashed.tc_yellow_light:hover { border-bottom-color: var(--color_yellow_light); } .te_underlined.tc_grey_light, .te_underdotted.tc_grey_light, .te_underdashed.tc_grey_light, .te_hover_underlined.tc_grey_light:hover, .te_hover_underdotted.tc_grey_light:hover, .te_underdashed.tc_grey_light:hover { border-bottom-color: var(--color_grey_light); } .te_underlined.tc_black_light, .te_underdotted.tc_black_light, .te_underdashed.tc_black_light, .te_hover_underlined.tc_black_light:hover, .te_hover_underdotted.tc_black_light:hover, .te_underdashed.tc_black_light:hover { border-bottom-color: var(--color_black_light); } .te_underlined.tc_white_light, .te_underdotted.tc_white_light, .te_underdashed.tc_white_light, .te_hover_underlined.tc_white_light:hover, .te_hover_underdotted.tc_white_light:hover, .te_underdashed.tc_white_light:hover { border-bottom-color: var(--color_white_light); } /* Text . Effects . Striked */ .te_striked { text-decoration: line-through; } /* Text . Effects . Indexing: Superscript + Subscript */ sup, sub { --text_indexes_font_size: var(--fs_default); } .fs_tiny sup, sup.fs_tiny { --text_indexes_font_size: var(--fs_tiny); } .fs_small sup, sup.fs_small { --text_indexes_font_size: var(--fs_small); } .fs_medium sup, sup.fs_medium { --text_indexes_font_size: var(--fs_medium); } .fs_large sup, sup.fs_large { --text_indexes_font_size: var(--fs_large); } .fs_huge sup, sup.fs_huge { --text_indexes_font_size: var(--fs_huge); } sup, sub { margin-left: calc( var(--text_indexes_font_size) * var(--text_indexes_margin_scale)); font-size: calc( var(--text_indexes_font_size) * var(--text_indexes_font_scale)); font-weight: normal; } /* Text . Operations */ /* Text . Operations . Truncate */ .to_truncate_1, .to_truncate_2, .to_truncate_3, .to_truncate_4, .to_truncate_5, .to_truncate_6, .to_truncate_7, .to_truncate_8, .to_truncate_9, .to_truncate_10 { display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; } .to_truncate_1 { -webkit-line-clamp: 1; } .to_truncate_2 { -webkit-line-clamp: 2; } .to_truncate_3 { -webkit-line-clamp: 3; } .to_truncate_4 { -webkit-line-clamp: 4; } .to_truncate_5 { -webkit-line-clamp: 5; } .to_truncate_6 { -webkit-line-clamp: 6; } .to_truncate_7 { -webkit-line-clamp: 7; } .to_truncate_8 { -webkit-line-clamp: 8; } .to_truncate_9 { -webkit-line-clamp: 9; } .to_truncate_10 { -webkit-line-clamp: 10; } /* Text . Operations . Truncate . Extra small screens */ @media (min-width: 100px) { /* Truncate . Override */ .xs-to_truncate_1 { -webkit-line-clamp: 1 !important; } .xs-to_truncate_2 { -webkit-line-clamp: 2 !important; } .xs-to_truncate_3 { -webkit-line-clamp: 3 !important; } .xs-to_truncate_4 { -webkit-line-clamp: 4 !important; } .xs-to_truncate_5 { -webkit-line-clamp: 5 !important; } .xs-to_truncate_6 { -webkit-line-clamp: 6 !important; } .xs-to_truncate_7 { -webkit-line-clamp: 7 !important; } .xs-to_truncate_8 { -webkit-line-clamp: 8 !important; } .xs-to_truncate_9 { -webkit-line-clamp: 9 !important; } .xs-to_truncate_10 { -webkit-line-clamp: 10 !important; } } /* Text . Operations . Truncate . Small screens */ @media (min-width: 768px) { /* Reset */ .xs-to_truncate_1, .xs-to_truncate_2, .xs-to_truncate_3, .xs-to_truncate_4, .xs-to_truncate_5, .xs-to_truncate_6, .xs-to_truncate_7, .xs-to_truncate_8, .xs-to_truncate_9, .xs-to_truncate_10 { -webkit-line-clamp: initial !important; } /* Truncate . Default */ .to_truncate_1 { -webkit-line-clamp: 1 !important; } .to_truncate_2 { -webkit-line-clamp: 2 !important; } .to_truncate_3 { -webkit-line-clamp: 3 !important; } .to_truncate_4 { -webkit-line-clamp: 4 !important; } .to_truncate_5 { -webkit-line-clamp: 5 !important; } .to_truncate_6 { -webkit-line-clamp: 6 !important; } .to_truncate_7 { -webkit-line-clamp: 7 !important; } .to_truncate_8 { -webkit-line-clamp: 8 !important; } .to_truncate_9 { -webkit-line-clamp: 9 !important; } .to_truncate_10 { -webkit-line-clamp: 10 !important; } /* Truncate . Override */ .sm-to_truncate_1 { -webkit-line-clamp: 1 !important; } .sm-to_truncate_2 { -webkit-line-clamp: 2 !important; } .sm-to_truncate_3 { -webkit-line-clamp: 3 !important; } .sm-to_truncate_4 { -webkit-line-clamp: 4 !important; } .sm-to_truncate_5 { -webkit-line-clamp: 5 !important; } .sm-to_truncate_6 { -webkit-line-clamp: 6 !important; } .sm-to_truncate_7 { -webkit-line-clamp: 7 !important; } .sm-to_truncate_8 { -webkit-line-clamp: 8 !important; } .sm-to_truncate_9 { -webkit-line-clamp: 9 !important; } .sm-to_truncate_10 { -webkit-line-clamp: 10 !important; } } /* Text . Operations . Truncate . Medium screens */ @media (min-width: 990px) { /* Reset */ .xs-to_truncate_1, .xs-to_truncate_2, .xs-to_truncate_3, .xs-to_truncate_4, .xs-to_truncate_5, .xs-to_truncate_6, .xs-to_truncate_7, .xs-to_truncate_8, .xs-to_truncate_9, .xs-to_truncate_10, .sm-to_truncate_1, .sm-to_truncate_2, .sm-to_truncate_3, .sm-to_truncate_4, .sm-to_truncate_5, .sm-to_truncate_6, .sm-to_truncate_7, .sm-to_truncate_8, .sm-to_truncate_9, .sm-to_truncate_10 { -webkit-line-clamp: initial !important; } /* Truncate . Default */ .to_truncate_1 { -webkit-line-clamp: 1 !important; } .to_truncate_2 { -webkit-line-clamp: 2 !important; } .to_truncate_3 { -webkit-line-clamp: 3 !important; } .to_truncate_4 { -webkit-line-clamp: 4 !important; } .to_truncate_5 { -webkit-line-clamp: 5 !important; } .to_truncate_6 { -webkit-line-clamp: 6 !important; } .to_truncate_7 { -webkit-line-clamp: 7 !important; } .to_truncate_8 { -webkit-line-clamp: 8 !important; } .to_truncate_9 { -webkit-line-clamp: 9 !important; } .to_truncate_10 { -webkit-line-clamp: 10 !important; } /* Truncate . Override */ .md-to_truncate_1 { -webkit-line-clamp: 1 !important; } .md-to_truncate_2 { -webkit-line-clamp: 2 !important; } .md-to_truncate_3 { -webkit-line-clamp: 3 !important; } .md-to_truncate_4 { -webkit-line-clamp: 4 !important; } .md-to_truncate_5 { -webkit-line-clamp: 5 !important; } .md-to_truncate_6 { -webkit-line-clamp: 6 !important; } .md-to_truncate_7 { -webkit-line-clamp: 7 !important; } .md-to_truncate_8 { -webkit-line-clamp: 8 !important; } .md-to_truncate_9 { -webkit-line-clamp: 9 !important; } .md-to_truncate_10 { -webkit-line-clamp: 10 !important; } } /* Text . Operations . Truncate . Large screens */ @media (min-width: 1200px) { /* Reset */ .xs-to_truncate_1, .xs-to_truncate_2, .xs-to_truncate_3, .xs-to_truncate_4, .xs-to_truncate_5, .xs-to_truncate_6, .xs-to_truncate_7, .xs-to_truncate_8, .xs-to_truncate_9, .xs-to_truncate_10, .sm-to_truncate_1, .sm-to_truncate_2, .sm-to_truncate_3, .sm-to_truncate_4, .sm-to_truncate_5, .sm-to_truncate_6, .sm-to_truncate_7, .sm-to_truncate_8, .sm-to_truncate_9, .sm-to_truncate_10, .md-to_truncate_1, .md-to_truncate_2, .md-to_truncate_3, .md-to_truncate_4, .md-to_truncate_5, .md-to_truncate_6, .md-to_truncate_7, .md-to_truncate_8, .md-to_truncate_9, .md-to_truncate_10 { -webkit-line-clamp: initial !important; } /* Truncate . Default */ .to_truncate_1 { -webkit-line-clamp: 1 !important; } .to_truncate_2 { -webkit-line-clamp: 2 !important; } .to_truncate_3 { -webkit-line-clamp: 3 !important; } .to_truncate_4 { -webkit-line-clamp: 4 !important; } .to_truncate_5 { -webkit-line-clamp: 5 !important; } .to_truncate_6 { -webkit-line-clamp: 6 !important; } .to_truncate_7 { -webkit-line-clamp: 7 !important; } .to_truncate_8 { -webkit-line-clamp: 8 !important; } .to_truncate_9 { -webkit-line-clamp: 9 !important; } .to_truncate_10 { -webkit-line-clamp: 10 !important; } /* Truncate . Override */ .lg-to_truncate_1 { -webkit-line-clamp: 1 !important; } .lg-to_truncate_2 { -webkit-line-clamp: 2 !important; } .lg-to_truncate_3 { -webkit-line-clamp: 3 !important; } .lg-to_truncate_4 { -webkit-line-clamp: 4 !important; } .lg-to_truncate_5 { -webkit-line-clamp: 5 !important; } .lg-to_truncate_6 { -webkit-line-clamp: 6 !important; } .lg-to_truncate_7 { -webkit-line-clamp: 7 !important; } .lg-to_truncate_8 { -webkit-line-clamp: 8 !important; } .lg-to_truncate_9 { -webkit-line-clamp: 9 !important; } .lg-to_truncate_10 { -webkit-line-clamp: 10 !important; } } /* Rulers */ ruler { --ruler_height: calc((var(--components_global_h) * var(--components_scale))) !important; display: block; width: 80%; margin: 0px auto 0px auto; /* height: calc(1px * (var(--ruler_height)/2));*/ border-width: 0px !important; border-bottom-width: 1px !important; overflow: visible; } /* Rulers . Sizes */ ruler.tiny { height: calc(1px * (var(--ruler_height)/4)); } ruler.small { height: calc(1px * (var(--ruler_height)/3)); } ruler, ruler.default { height: calc(1px * (var(--ruler_height)/2)); } ruler.medium { height: calc(1px * (var(--ruler_height))); } ruler.large { height: calc(1px * (var(--ruler_height)*2)); } ruler.huge { height: calc(1px * (var(--ruler_height)*3)); } /* Rulers . Styles */ ruler { border-style: solid; } /* Rulers . Styles . Dashed */ ruler.dashed { border-style: dashed; } /* Rulers . Styles . Dotted */ ruler.dotted { border-style: dotted; } /* Rulers . Colors */ /* Default */ ruler { border-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 1);} /* Base */ ruler.primary { border-color: rgba(var(--color_primary_r), var(--color_primary_g), var(--color_primary_b), 1);} ruler.secondary { border-color: rgba(var(--color_secondary_r), var(--color_secondary_g), var(--color_secondary_b), 1);} /* Standard */ ruler.red { border-color: rgba(var(--color_red_r), var(--color_red_g), var(--color_red_b), 1);} ruler.green { border-color: rgba(var(--color_green_r), var(--color_green_g), var(--color_green_b), 1);} ruler.blue { border-color: rgba(var(--color_blue_r), var(--color_blue_g), var(--color_blue_b), 1);} ruler.orange { border-color: rgba(var(--color_orange_r), var(--color_orange_g), var(--color_orange_b), 1);} ruler.yellow { border-color: rgba(var(--color_yellow_r), var(--color_yellow_g), var(--color_yellow_b), 1);} ruler.grey { border-color: rgba(var(--color_grey_r), var(--color_grey_g), var(--color_grey_b), 1);} ruler.black { border-color: rgba(var(--color_black_r), var(--color_black_g), var(--color_black_b), 1);} ruler.white { border-color: rgba(var(--color_white_r), var(--color_white_g), var(--color_white_b), 1);} /* Dark */ ruler.red_dark { border-color: rgba(var(--color_red_dark_r), var(--color_red_dark_g), var(--color_red_dark_b), 1);} ruler.green_dark { border-color: rgba(var(--color_green_dark_r), var(--color_green_dark_g), var(--color_green_dark_b), 1);} ruler.blue_dark { border-color: rgba(var(--color_blue_dark_r), var(--color_blue_dark_g), var(--color_blue_dark_b), 1);} ruler.orange_dark { border-color: rgba(var(--color_orange_dark_r), var(--color_orange_dark_g), var(--color_orange_dark_b), 1);} ruler.yellow_dark { border-color: rgba(var(--color_yellow_dark_r), var(--color_yellow_dark_g), var(--color_yellow_dark_b), 1);} ruler.grey_dark { border-color: rgba(var(--color_grey_dark_r), var(--color_grey_dark_g), var(--color_grey_dark_b), 1);} ruler.black_dark { border-color: rgba(var(--color_black_dark_r), var(--color_black_dark_g), var(--color_black_dark_b), 0.75);} ruler.white_dark { border-color: rgba(var(--color_white_dark_r), var(--color_white_dark_g), var(--color_white_dark_b), 0.75);} /* Medium */ ruler.red_medium { border-color: rgba(var(--color_red_medium_r), var(--color_red_medium_g), var(--color_red_medium_b), 1);} ruler.green_medium { border-color: rgba(var(--color_green_medium_r), var(--color_green_medium_g), var(--color_green_medium_b), 1);} ruler.blue_medium { border-color: rgba(var(--color_blue_medium_r), var(--color_blue_medium_g), var(--color_blue_medium_b), 1);} ruler.orange_medium { border-color: rgba(var(--color_orange_medium_r), var(--color_orange_medium_g), var(--color_orange_medium_b), 1);} ruler.yellow_medium { border-color: rgba(var(--color_yellow_medium_r), var(--color_yellow_medium_g), var(--color_yellow_medium_b), 1);} ruler.grey_medium { border-color: rgba(var(--color_grey_medium_r), var(--color_grey_medium_g), var(--color_grey_medium_b), 1);} ruler.black_medium { border-color: rgba(var(--color_black_medium_r), var(--color_black_medium_g), var(--color_black_medium_b), 0.5);} ruler.white_medium { border-color: rgba(var(--color_white_medium_r), var(--color_white_medium_g), var(--color_white_medium_b), 0.5);} /* Light */ ruler.red_light { border-color: rgba(var(--color_red_light_r), var(--color_red_light_g), var(--color_red_light_b), 1);} ruler.green_light { border-color: rgba(var(--color_green_light_r), var(--color_green_light_g), var(--color_green_light_b), 1);} ruler.blue_light { border-color: rgba(var(--color_blue_light_r), var(--color_blue_light_g), var(--color_blue_light_b), 1);} ruler.orange_light { border-color: rgba(var(--color_orange_light_r), var(--color_orange_light_g), var(--color_orange_light_b), 1);} ruler.yellow_light { border-color: rgba(var(--color_yellow_light_r), var(--color_yellow_light_g), var(--color_yellow_light_b), 1);} ruler.grey_light { border-color: rgba(var(--color_grey_light_r), var(--color_grey_light_g), var(--color_grey_light_b), 1);} ruler.black_light { border-color: rgba(var(--color_black_light_r), var(--color_black_light_g), var(--color_black_light_b), 0.25);} ruler.white_light { border-color: rgba(var(--color_white_light_r), var(--color_white_light_g), var(--color_white_light_b), 0.25);} /* Rulers . Strings */ ruler string { position: relative; display: inline-block; line-height: calc(1px * var(--ruler_height)) ; margin-bottom: calc(-1px * (var(--ruler_height)/2)); background-color: white; padding-left: 30px; padding-right: 30px; text-transform: uppercase; } /* Paragraphs */ /* Paragraphs . Default */ /* Paragraphs . Types */ .quote { font-style: italic; } .citation { font-style: italic; } .code { font-style: italic; } /* ------------------- Basekit Framework · Lists Fev . 2022 © Exactuflow http://basekit.exactusensu.pt Table of Contents · Lists ------------------- */ /* Lists */ /* Lists . Reset */ ul, li { margin: 0px; padding: 0px; list-style: none; } /* Lists . Default */ ul { padding-top: 0px; } ul li { color: inherit; margin-bottom: 0px; } /* Lists . Items . Inline */ ul.inline li { display: inline-block; } /* Lists . Items . Default */ ul[class*="ls_"] > li { padding-left: 1em; } ul[class*="ls_"] li:before { display: inline-block; font-family: ExactuSymbols; text-align: center; padding-right: 0.1em; margin-left: -1em; line-height: 100%; } /* Lists . Items . Bullet */ ul.ls_dot > li:before { font-family: inherit; content: " \22C5"; } ul.ls_dash > li:before { font-family: inherit; content: '\2212'; } ul.ls_asterisk > li:before { font-family: inherit; content: '\2217'; } ul.ls_tick > li:before { content: 'Z'; } ul.ls_cross > li:before { content: 'W'; } ul.ls_arrow > li:before { content: '\010f'; } ul.ls_danger > li:before { content: 'D'; } ul.ls_danger.outline > li:before { content: 'E'; } ul.ls_info > li:before { content: 'F'; } ul.ls_info.outline > li:before { content: 'G'; } ul.ls_alert > li:before { content: 'H'; } ul.ls_alert.outline > li:before { content: 'I'; } ul.ls_valid > li:before { content: 'X'; } ul.ls_valid.outline > li:before { content: 'Y'; } ul.ls_legal > li:before { content: 'U'; } ul.ls_legal.outline > li:before { content: 'V'; } ul.ls_invalid > li:before { content: 'U'; } ul.ls_invalid.outline > li:before { content: 'V'; } /* Lists . Items . Bullet . Color . Default */ .lc_bullet_default > li:before, li.lc_bullet_default:before { color: #24556e; } .lc_bullet_primary > li:before, li.lc_bullet_primary:before { color: #0088ba; } .lc_bullet_secondary > li:before, li.lc_bullet_secondary:before { color: #ffd000; } /* Lists . Items . Bullet . Color . Red */ .lc_bullet_red > li:before, li.lc_bullet_red:before { color: #d45353; } .lc_bullet_red_dark > li:before, li.lc_bullet_red_dark:before { color: #801e1e; } .lc_bullet_red_medium > li:before, li.lc_bullet_red_medium:before { color: #c45656; } .lc_bullet_red_light > li:before, li.lc_bullet_red_light:before { color: #da9494; } /* Lists . Items . Bullet . Color . Green */ .lc_bullet_green > li:before, li.lc_bullet_green:before { color: #39b876; } .lc_bullet_green_dark > li:before, li.lc_bullet_green_dark:before { color: #00735b; } .lc_bullet_green_medium > li:before, li.lc_bullet_green_medium:before { color: #20a864; } .lc_bullet_green_light > li:before, li.lc_bullet_green_light:before { color: #8bcc95; } /* Lists . Items . Bullet . Color . Blue */ .lc_bullet_blue > li:before, li.lc_bullet_blue:before { color: #007ee5; } .lc_bullet_blue_dark > li:before, li.lc_bullet_blue_dark:before { color: #004b73; } .lc_bullet_blue_medium > li:before, li.lc_bullet_blue_medium:before { color: #0075b3; } .lc_bullet_blue_light > li:before, li.lc_bullet_blue_light:before { color: #aec9df; } /* Lists . Items . Bullet . Color . Orange */ .lc_bullet_orange > li:before, li.lc_bullet_orange:before { color: #ffaa54; } .lc_bullet_orange_dark > li:before, li.lc_bullet_orange_dark:before { color: #bf6100; } .lc_bullet_orange_medium > li:before, li.lc_bullet_orange_medium:before { color: #eba457; } .lc_bullet_orange_light > li:before, li.lc_bullet_orange_light:before { color: #ffe2c4; } /* Lists . Items . Bullet . Color . Yellow */ .lc_bullet_yellow > li:before, li.lc_bullet_yellow:before { color: #ffea00; } .lc_bullet_yellow_dark > li:before, li.lc_bullet_yellow_dark:before { color: #ffbe00; } .lc_bullet_yellow_medium > li:before, li.lc_bullet_yellow_medium:before { color: #ffd24a; } .lc_bullet_yellow_light > li:before, li.lc_bullet_yellow_light:before { color: #fff1c7; } /* Lists . Items . Bullet . Color . Grey */ .lc_bullet_grey > li:before, li.lc_bullet_grey:before { color: #4d4d4d; } .lc_bullet_grey_dark > li:before, li.lc_bullet_grey_dark:before { color: #414042; } .lc_bullet_grey_medium > li:before, li.lc_bullet_grey_medium:before { color: #939598; } .lc_bullet_grey_light > li:before, li.lc_bullet_grey_light:before { color: #e6e7e8; } /* Lists . Items . Bullet . Color . Black */ .lc_bullet_black > li:before, li.lc_bullet_black:before { color: #000000; } .lc_bullet_black_dark > li:before, li.lc_bullet_black_dark:before { color: #000000; } .lc_bullet_black_medium > li:before, li.lc_bullet_black_medium:before { color: rgba(0,0,0,0.5); } .lc_bullet_black_light > li:before, li.lc_bullet_black_light:before { color: rgba(0,0,0,0.2); } /* Lists . Items . Bullet . Color . White */ .lc_bullet_white > li:before, li.lc_bullet_white:before { color: #ffffff; } .lc_bullet_white_dark > li:before, li.lc_bullet_white_dark:before { color: #ffffff; } .lc_bullet_white_medium > li:before, li.lc_bullet_white_medium:before { color: rgba(255,255,255,0.5); } .lc_bullet_white_light > li:before, li.lc_bullet_white_light:before { color: rgba(255,255,255,0.2); } /* Lists . Progress */ /* Lists . Progress . Symbols */ .list.progress li:before { display: block; float: left; height: 32px; width: 32px; content: "ď"; font-family: ExactuSymbols; font-size: 24px; line-height: 38px; text-align: center; border-radius: 50%; margin-left: -38px; background-color: #ffffff; } .list.progress li:before, .list.progress.arrow li:before, .list.progress li.arrow:before { content: "ď"; font-size: 30px; line-height: 38px; } .list.progress.tick li:before, .list.progress li.tick:before { content: "/"; font-size: 22px; line-height: 37px; } .list.progress.cross li:before, .list.progress li.cross:before { content: "W"; font-size: 24px; line-height: 38px; } .list.progress.danger li:before, .list.progress li.danger:before { content: "D"; font-size: 24px; line-height: 35px; } .list.progress.info li:before, .list.progress li.info:before { content: "F"; font-size: 24px; line-height: 35px; } .list.progress.alert li:before, .list.progress li.alert:before { content: "H"; font-size: 24px; line-height: 37px; } /* Lists . Progress . Bullet */ /* Lists . Progress . Bullet . Backgrounds . Default */ .bb_default li:before, li.bb_default:before { background-color: #24556e !important; } .bb_primary li:before, li.bb_primary:before { background-color: #0088ba !important; } .bb_secondary li:before, li.bb_secondary:before { background-color: #ffd000 !important; } /* Lists . Progress . Bullet . Backgrounds . Colors . Red */ .bb_red li:before, li.bb_red:before { background-color: #d45353 !important; } .bb_red_dark li:before, li.bb_red_dark:before { background-color: #801e1e !important; } .bb_red_medium li:before, li.bb_red_medium:before { background-color: #c45656 !important; } .bb_red_light li:before, li.bb_red_light:before { background-color: #da9494 !important; } /* Backgrounds . Colors . Green */ .bb_green li:before, li.bb_green:before { background-color: #39b876 !important; } .bb_green_dark li:before, li.bb_green_dark:before { background-color: #00735b !important; } .bb_green_medium li:before, li.bb_green_medium:before { background-color: #20a864 !important; } .bb_green_light li:before, li.bb_green_light:before { background-color: #8bcc95 !important; } /* Backgrounds . Colors . Blue */ .bb_blue li:before, li.bb_blue:before { background-color: #007ee5 !important; } .bb_blue_dark li:before, li.bb_blue_dark:before { background-color: #004b73 !important; } .bb_blue_medium li:before, li.bb_blue_medium:before { background-color: #0075b3 !important; } .bb_blue_light li:before, li.bb_blue_light:before { background-color: #aec9df !important; } /* Backgrounds . Colors . Orange */ .bb_orange li:before, li.bb_orange:before { background-color: #ffaa54 !important; } .bb_orange_dark li:before, li.bb_orange_dark:before { background-color: #bf6100 !important; } .bb_orange_medium li:before, li.bb_orange_medium:before { background-color: #eba457 !important; } .bb_orange_light li:before, li.bb_orange_light:before { background-color: #ffe2c4 !important; } /* Backgrounds . Colors . Yellow */ .bb_yellow li:before, li.bb_yellow:before { background-color: #ffea00 !important; } .bb_yellow._dark li:before, li.bb_yellow:before { background-color: #ffbe00 !important; } .bb_yellow_medium li:before, li.bb_yellow_medium:before { background-color: #ffd24a !important; } .bb_yellow_light li:before, li.bb_yellow_light:before { background-color: #fff1c7 !important; } /* Backgrounds . Colors . Grey */ .bb_grey li:before, li.bb_grey:before { background-color: #4d4d4d !important; } .bb_grey_dark li:before, li.bb_grey_dark:before { background-color: #414042 !important; } .bb_grey_medium li:before, li.bb_grey_medium:before { background-color: #939598 !important; } .bb_grey_light li:before, li.bb_grey_light:before { background-color: #e6e7e8 !important; } /* Backgrounds . Colors . Black */ .bb_black li:before, li.bb_black:before { background-color: #000000 !important; } .bb_black_dark li:before, li.bb_black_dark:before { background-color: #000000 !important; } .bb_black_medium li:before, li.bb_black_medium:before { background-color: rgba(0,0,0,0.5) !important; } .bb_black_light li:before, li.bb_black_light:before { background-color: rgba(0,0,0,0.2) !important; } /* Backgrounds . Colors . White */ .bb_white li:before, li.bb_white:before { background-color: #ffffff !important; } .bb_white_dark li:before, li.bb_white_dark:before { background-color: #ffffff !important; } .bb_white_medium li:before, li.bb_white_medium:before { background-color: rgba(255,255,255,0.5) !important; } .bb_white_light li:before, li.bb_white_light:before { background-color: rgba(255,255,255,0.2) !important; } /* Lists . Progress . Default */ .list.progress li { overflow: auto; margin-bottom: 0px; padding-bottom: 30px; padding-left: 38px; background-image: url('assets/media/list.progress.dashes.png'); background-repeat: repeat-y; background-position: 16px 0px; background-size: 1px 7px; } .list.progress li:last-child { background-image: none; } /* Lists . Progress . Positioning */ /* Lists . Progress . Positioning . Extra small screens */ @media (min-width: 0px) { .list.progress li span { padding-top: 8px; } } /* Lists . Progress . Positioning . Small screens */ @media (min-width: 768px) { .list.progress li span { padding-top: 8px; } } /* Lists . Progress . Positioning . Medium screens */ @media (min-width: 992px) { .list.progress li span { padding-top: 5px; } } /* Lists . Progress . Positioning . Large screens */ @media (min-width: 1200px) { }