CSS Guidelines

All (developers, testers, and others) are requested to strictly follow these guidelines. No other class to be introduced without prior discussion (and that too only if there is no other option)

THIS IS H1 CLASS.

.h1 { font-family: var(--font-family-1); font-size: 26px; font-weight: 300; color: var(--color-dynamic-1); text-transform: uppercase; }

This is h1_inactive Class.

.h1_inactive { font-size: 26px; color: var(--color-dynamic-2); font-family: var(--font-family-1); }

THIS IS H2_ACTIVE CLASS.

.h2_active { font-family: var(--font-family-1); font-size: 18px; font-weight: 700; color: var(--color-dynamic-1)!important; text-transform: uppercase; }

THIS IS H2_INACTIVE CLASS.

.h2_inactive { font-family: var(--font-family-1); font-size: 18px; font-weight: 700; color: var(--color-dynamic-2); text-transform: uppercase; }

THIS IS H3_ACTION_TITLE_ACTIVE CLASS.

.h3_action_title_active { font-family: var(--font-family-1); font-size: 18px; font-weight: 300; color: var(--color-dynamic-1); text-transform: uppercase; }

THIS IS H3_ACTION_TITLE_INACTIVE CLASS.

.h3_action_title_inactive { font-family: var(--font-family-1); font-size: 18px; font-weight: 300; color: var(--color-dynamic-2); text-transform: uppercase; }

THIS IS H4_ACTION_TITLE_ACTIVE CLASS.

.h4_action_title_active { font-family: var(--font-family-1); font-size: 16px; font-weight: 700; color: var(--color-dynamic-1); text-transform: uppercase; }

THIS IS H4_ACTION_TITLE_INACTIVE CLASS.

.h4_action_title_inactive { font-family: var(--font-family-1); font-size: 16px; font-weight: 400; color: var(--color-dynamic-2); text-transform: uppercase; }

This is H5_action_title_inactive Class.

.h5_action_title_inactive { font-family: var(--font-family-1); font-size: 16px; font-weight: 700; color: var(--color-dynamic-2); line-height: 30px }

This is H6_inactive Class.

.h6_inactive { font-family: var(--font-family-1); font-size: 18px; font-weight: 400; color: var(--color-dynamic-2); }

THIS IS H1_font_size CLASS.

.h1_font_size{ font-size: 36px !important; }

This is p Class.

.p { font-size: 16px; font-weight: 400; color: var(--color-dynamic-2); }

This is p_hyperlink Class.

.p_hyperlink { font-size: 16px; font-weight: 400; color: var(--color-dynamic-1); }

This is p_hyperlink_hover Class.

.p_hyperlink_hover { font-size: 16px; font-weight: 400; color: var(--color-dynamic-1); text-decoration: underline; }

This Is Field_Title Class.

.field_title { font-size: 16px; font-weight: 400; color: var(--color-dynamic-2); text-transform: capitalize; }

THIS IS FIELD_TITLE_1 CLASS.

.field_title_1 { font-size: 14px; font-weight: 700; color: var(--color-dynamic-2); text-transform: uppercase; }
.button_positive_1_active { font-size: 14px; font-weight: 700; color: var(--color-dynamic-3)!important; text-transform: uppercase; border-radius: 0; border: solid 1px var(--color-dynamic-1)!important; background-color: var(--color-dynamic-1)!important; }
.button_positive_2_active { font-size: 14px; font-weight: 700; color: var(--color-dynamic-1)!important; text-transform: uppercase; border-radius: 0; border: solid 1px var(--color-dynamic-1)!important; background-color: var(--color-dynamic-3)!important; }
.button_negative_active { font-size: 14px; font-weight: 700; color: var(--color-dynamic-3)!important; text-transform: uppercase; border-radius: 0; border: solid 1px var(--color-dynamic-2)!important; background-color: var(--color-dynamic-2)!important; }
.button_inactive { font-size: 14px; font-weight: 700; color: var(--color-dynamic-3)!important; text-transform: uppercase; border-radius: 0; border: solid 1px var(--color-dynamic-4)!important; background-color: var(--color-dynamic4)!important; }

This is regular border (class .border_8).

.border_8 { border-color: var(--color-dynamic-4)!important; }

This is highlighted/hover border (class .border_1).

.border_1 { border-color: var(--color-dynamic-1)!important; }

.background_1 { background-color: var(--color-dynamic-1)!important; }

.background_2 { background-color: var(--color-dynamic-2)!important; }

.background_3 { background-color: var(--color-dynamic-3)!important; }

.background_4 { background-color: var(--color-dynamic-8)!important; }

.background_5 { background-color: var(--color-dynamic-5)!important; }

.background_6 { background-color: var(--color-dynamic-6)!important; }

.background_7 { background-color: var(--color-dynamic-7)!important; }

.form_field_active { font-size: 14px; font-weight: 400; color: var(--color-dynamic-2); border: solid 1px var(--color-dynamic-4)!important; border-radius: 0; background-color: var(--color-dynamic-3)!important; }

.form_field_inactive { font-size: 14px; font-weight: 400; color: var(--color-dynamic-2); border: solid 1px var(--color-dynamic-8)!important; border-radius: 0; background-color: var(--color-dynamic-3)!important; }

.form_field_deactived { font-size: 14px; font-weight: 400; color: var(--color-dynamic-8); border: solid 1px var(--color-dynamic-4)!important; border-radius: 0; background-color: var(--color-dynamic-5)!important; }

This is form field label / icon text / raw text.

.form-label, .icontxt, .rawtxt { font-size: 14px; font-weight: 400; color: var(--color-dynamic-2)!important; }

This is information text (same as above but center aligned).

.information_text { font-size: 14px; font-weight: 400; color: var(--color-dynamic-2)!important; text-align: center }