io.parrots/styles/variables.less

Parrots.io App

// Re-import variables from Phlox module
@import "@{IMPORT_BASE_PATH_PARROTS}/com.phloxui/styles/phlox-variables";

@FONT_CONTENT_STYLE_IMPORT_URL: "https://fonts.googleapis.com/css?family=Kanit:200,300,700";

// index
@BODY_MIN_WIDTH: 768px;
@CLR_BRAND: #EB3349;
@CLR_BRAND_HUE: @CLR_C;

// AccountAuthenticationPage
@ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1: @CLR_BRAND;
@ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2: #F6A38A;
@ACCOUNT_AUTHENTICATION_PAGE_BOX_SHADOW: 0px 8px 29px -5px rgba(0,0,0,0.66);
@ACCOUNT_AUTHENTICATION_PAGE_DISPLAY: flex;
@ACCOUNT_AUTHENTICATION_PAGE_POSITION: absolute;
@ACCOUNT_AUTHENTICATION_PAGE_ALIGN_ITEM: center;
@ACCOUNT_AUTHENTICATION_PAGE_JUSTIFY_CONTENT: @ACCOUNT_AUTHENTICATION_PAGE_ALIGN_ITEM;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_POSITION: absolute;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_ALIGN_ITEM: center;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_DISPLAY: flex;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_JUSTIFY_CONTENT: flex-end;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_HEIGHT: 50pt;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_TEXT_LANGUAGE_PADDING_LEFT: 20pt;
@ACCOUNT_AUTHENTICATION_PAGE_HEADER_TEXT_LANGUAGE_PADDING_RIGHT: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_TEXT_LANGUAGE_PADDING_LEFT;
@ACCOUNT_AUTHENTICATION_PAGE_BODY_VIEW_TEXT_HEADER_PADDING_BOTTOM: 5pt;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_POSITION: absolute;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_ALIGN_ITEM: center;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_DISPLAY: flex;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_JUSTIFY_CONTENT: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_ALIGN_ITEM;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_HEIGHT: @ACCOUNT_AUTHENTICATION_PAGE_HEADER_VIEW_HEIGHT;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_TEXT_PADDING_LEFT: 12pt;
@ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_TEXT_PADDING_RIGHT: @ACCOUNT_AUTHENTICATION_PAGE_FOOTER_VIEW_TEXT_PADDING_LEFT;
@ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_POSITION: absolute;
@ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_DISPLAY: none;
@ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_ALIGN_ITEMN: center;
@ACCOUNT_AUTHENTICATION_PAGE_GREET_VIEW_TEXT: center;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_DISPLAY: flex;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_RIFGT: 48pt;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_WIDTH: 100px;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_HEIGHT: 30pt;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_ALIGN_ITEM: center;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_BACKGROUND_COLOR: #F25245;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_BORDER_RADIUS: 5pt;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_POSITION: absolute;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_RIGHT: 8%;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_JUSTIFY_CONTENT: center;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_CURSOR: pointer;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_PADDING_LEFT: 15px;
@ACCOUNT_AUTHENTICATION_PAGE_BTN_MARGIN_TOP: 6%;

// LoginPage
@LOGIN_PAGE_SININ_VIEW_WIDTH: 430pt;
@LOGIN_PAGE_SININ_VIEW_HEIGHT: 400pt;
@LOGIN_PAGE_SININ_VIEW_POSITION: relative;
@LOGIN_PAGE_SININ_VIEW_BOX_SHADOW: @ACCOUNT_AUTHENTICATION_PAGE_BOX_SHADOW;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_MARGIN: 1% 8% 21% 8%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_PADDING_TOP: 7%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_PADDING_HEIGHT: 69%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_DISPLAY: flex;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_ALIGN_ITEMN: center;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_PADDING_BOTTOM: 6%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_TITLE_VIEW_ICON_PADDING_RIGHT: 6%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_BOX_PADDING_TOP: 1%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_DISPLAY: flex;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_ALIGN_ITEMN: center;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_PADDING_TOP: 4%;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_PADDING_RIGHT: 12pt;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_ICON_PADDING_RIGHT: 8pt;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_CONFIRM_EMAIL_PADDING_RIGHT: 12pt;
@LOGIN_PAGE_SININ_VIEW_WRAPPER_VIEW_WRAPPER_TEXT_FORGOT_PASSWORD_PADDING_RIGHT: 12pt;
@LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_POSITION: absolute;
@LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_ALIGN_ITEMN: center;
@LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_DISPLAY: flex;
@LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_JUSTIFY_CONTENT: center;
@LOGIN_PAGE_SININ_VIEW_FOOTER_VIEWHEIGHT: 50pt;
@LOGIN_PAGE_SININ_VIEW_FOOTER_VIEW_CURSOR: pointer;

// RegisterPage
@REGISTER_PAGE_NUMBER_DISPLAY: flex;
@REGISTER_PAGE_NUMBER_JUSTIFY_CONTENT: center;
@REGISTER_PAGE_NUMBER_PADDING_TOP: 2%;
@REGISTER_PAGE_NUMBER_RCORNERS_DENSE_OPACITY: 1;
@REGISTER_PAGE_NUMBER_RCORNERS_OPACITY: 0.4;
@REGISTER_PAGE_NUMBER_RCORNERS_BORDER_RAIUS: 50%;
@REGISTER_PAGE_NUMBER_RCORNERS_WIDTH: 8px;
@REGISTER_PAGE_NUMBER_RCORNERS_HEIGHT: @REGISTER_PAGE_NUMBER_RCORNERS_WIDTH;
@REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_LEFT: 2px;
@REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_RIGHT: @REGISTER_PAGE_NUMBER_RCORNERS_MARGIN_LEFT;
@REGISTER_PAGE_REGISTER_VIEW_WIDTH: 992px;
@REGISTER_PAGE_REGISTER_VIEW_HEIGHT: 450pt;
@REGISTER_PAGE_REGISTER_VIEW_POSITION: relative;
@REGISTER_PAGE_REGISTER_VIEW_BOX_SHADOW: @ACCOUNT_AUTHENTICATION_PAGE_BOX_SHADOW;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_OVERFLOW: hidden;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_POSITION: absolute;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_OPACITY: 0.3;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_BG_COLOR: transparent;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_OVERFLOW: hidden;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_POSITION: absolute;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_BOTTOM: 12%;
@REGISTER_PAGE_WRAPPER_BG_IMAGE_SHADOW_AFTER_IMAGE_TEXT_ALIGN: center;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_MARGIN: 1% 8% 0% 8%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_PADDING_TOP: 6%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_PADDING_HEIGHT: 99%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROPDOWN_HEIGHT: 25pt;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROPDOWN_MENU_MIN_WIDTH: 180px;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROPDOWN_MENU_MIN_HEIGHT: 300px;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_HEIGHT: 25pt;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_MARGIN_BOTTOM: @REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_HEIGHT;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_BORDER_BOTTOM: 1px solid #d6d6d6;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEL_TEXTBOX_WIDTH: 80%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEPLAIN_TEXT_DISPLAY: flex;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEPLAIN_TEXT_VIEW_DETAIL_DATA_PADDING_LEFT: 2pt;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_DISPLAY: flex;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_ALIGN_ITEMN: center;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_PADDING_BOTTOM: 4%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_HEADER_VIEW_ICON_PADDING_RIGHT: 6%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_DROP_DOWN_PADDING_TOP: 18pt;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_TEXT_BOX_PADDING_BOTTOM: 2pt;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_BOTTOM: 6%;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_POSITION: absolute;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_HEIGHT: 55pt;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_DISPLAY: flex;
@REGISTER_PAGE_REGISTER_VIEW_WRAPPER_FOOTER_WIDTH: 79%;

// CreateAccountPage
@CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_HEIGHT: 3pt;
@CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_MARGIN_TOP: 6%;
@CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_TEXT_MARGIN_TOP: 1%;
@CREATE_ACCOUNT_PAGE_REGISTER_VIEW_WRAPPER_SECURITY_LEVEL_TEXT_DESCRIPTION_MARGIN_TOP: 6%;

// TermsOfServicePage
@TERMS_OF_SERVICE_PAGE_MARGIN: 0% 8% 0 8%;
@TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_TITLE_PADDING_TOP: 8%;
@TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_HEIGHT: 252pt;
@TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_ORVERFLOW: auto;
@TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_MARGIN_TOP: 18pt;
@TERMS_OF_SERVICE_PAGE_WRAPPER_HEADER_BODY_DETAIL_PADDING_RIGHT: 12pt;

//RegisterValidationEmailPage
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_HEIGHT: 246px;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_DISPLAY: flex;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_JUSTIFY_CONTENT: center;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_JUSTIFY_ITEM: center;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_PADDINT_TOP: 40pt;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_WRAPPER_ICON_DISPLAY: flex;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_WRAPPER_ICON_ALIGN_CONTENT: center;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_WRAPPER_ICON_ALIGN_ITEM: center;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_IMAGE_PADDINT_BOTTOM: 25pt;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TITLE_PADDINT_BOTTOM: 4pt;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_DESCRIPTION_PADDINT_BOTTOM: 28pt;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_TEXT_ALIGN: center;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_PADDING_BOTTOM: 4pt;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_DISPLAY: flex;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_JUSTIFY_ITEM: center;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_PADDING_LEFT: 8pt;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_PADDING_RIGHT: @REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_PADDING_LEFT;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_BOX_WIDTH: 240px;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_BOX_EMAIL_TEXT_BOX_MARGIN_TOP: -10px;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_EMAIL_FOOTER_POSITION: absolute;
@REGISTER_VALIDATION_EMAIL_PAGE_VIEW_EMAIL_FOOTER_BOTTOM: 58pt;

// AppPreloadPage
@APP_PRE_LOAD_PAGE_LOADER_WIDTH: 25pt;

// MenuTop
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_WIDGTH: 100%;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_DISPLAY: flex;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_FULL_LINE_DISPLAY: flex;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_FULL_LINE_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_FULL_LINE_WIDTH: 0.75px;
@MENU_TOP_WRAPPER_LEFT_MENU_BRAND_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_LEFT_MENU_BRAND_DISPLAY: flex;
@MENU_TOP_WRAPPER_LEFT_MENU_BRAND_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_LEFT_MENU_BRAND_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_PADDING_LEFT: 1%;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_PADDING_RIGHT: 1%;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_WIDGTH: 0.75px;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_DISPLAY: flex;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_HEIGHT: 20pt;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_WIDGTH: 1px;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_DISPLAY: flex;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_LEFT_MENU_POWER_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_LEFT_MENU_POWER_WIDGTH: 17%;
@MENU_TOP_WRAPPER_LEFT_MENU_POWER_DISPLAY: flex;
@MENU_TOP_WRAPPER_LEFT_MENU_POWER_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_LEFT_MENU_POWER_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_CENTER_MENU_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_CENTER_MENU_DISPLAY: flex;
@MENU_TOP_WRAPPER_CENTER_MENU_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_CENTER_MENU_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_DISPLAY: flex;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_MARGIN_RIGHT: 42px;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_ACTIVE_DISPLAY: flex;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_ACTIVE_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_ACTIVE_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_ACTIVE_MARGIN_RIGHT: 50px;
@MENU_TOP_WRAPPER_RIGTH_MENU_POSITION: absolute;
@MENU_TOP_WRAPPER_RIGTH_MENU_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_RIGTH_MENU_DISPLAY: flex;
@MENU_TOP_WRAPPER_RIGTH_MENU_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_HEIGHT: 50pt;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_PADDING_LEFT: 20px;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_WIDGTH: 30px;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_DISPLAY: flex;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_HEIGHT: 20pt;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_DISPLAY: flex;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_DISPLAY: flex;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_JUSTIFY_CONTENT: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_ALIGN_ITEMS: center;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_WIDGTH: 34px;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_HEIGHT: 34px;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_BORDER_RADIUS: 50%;
@MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_MARGIN_RIGHT: 15px;

// media menutop
@MEDIA_MENU_TOP_HEIGHT: 40pt;
@MEDIA_MENU_TOP_PADDING_RIGHT: 20px;
@MEDIA_MENU_TOP_VERTICAL_LINE: 15pt;
@MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_PADDING_LEFT: 15px;
@MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_PADDING_RIGHT: 15px;
@MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_WIDTH: 1px;
@MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_WIDGTH: 27px;
@MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_HEIGHT: 27px;
@MEDIA_MENU_TOP_WRAPPER_LEFT_MENU_ICON_WIDTH: 24%;

// SystemPage
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_DISPLAY: inline-block;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_POSITION: absolute;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_HEIGHT: 100%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_WIDTH: 20.62%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_LINE_HEIGHT: 0.2%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_LINE_WIDTH: 100%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_IMG_MARGIN_LEFT: 7%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_TITLE_PADDING_LEFT: 5%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_WIDTH: 20.62%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_PADDING_LEFT: 2.5%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_PADDING_TOP: 3%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_DESCRIPTION_PADDING_BOTTOM: 11%;
@SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_DESCRIPTION_PADDING_TOP: 5%;

// AccounntPage
@ACCOUNT_PAGE_WRAPPER_MENU_HEGHT: 50pt;
@ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_HEIGHT: @ACCOUNT_PAGE_WRAPPER_MENU_HEGHT;
@ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_PADDING_LEFT: 35px;
@ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_PADDING_RIGHT: 35px;
@ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_VERTICAL_HEIGHT: 20pt;
@ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_VERTICAL_WIDTH: 0.75px;
@ACCOUNT_PAGE_WRAPPER_USERNAME_MENU_IMG_USER_WIDTH: 30px;
@ACCOUNT_PAGE_WRAPPER_USERNAME_MENU_IMG_USER_HEIGHT: 25pt;
@ACCOUNT_PAGE_WRAPPER_USERNAME_MENU_IMG_USER_BORDER_RADIUS: 12.5pt;
@ACCOUNT_PAGE_BELOW_LINE_MENU_HEIGHT: 6pt;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_PADDING_LEFT: 7%;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_PADDING_RIGHT: 7%;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_PADDING_TOP: 3%;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_PADDING_BOTTOM: 5%;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_PADDING_LEFT: 1%;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_WIDTH: 100px;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_HEIGHT: 71pt;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_BORDER_RADIUS: 35pt;
@ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_TITLE_DESCRIPTION_PADDING_LEFT: 2.5%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_PADDING_BOTTOM: 7%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_PADDING_LEFT: 5%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_PADDING_BOTTOM: 5%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_EDIT_MARGIN_LEFT: 80%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_EDIT_MARGIN_TOP: 1%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_MARGIN_BOTTOM: 0.35%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_HEIGHT: 45pt;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_NAME_PADDING_LEFT: 6%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_NAME_WIDTH: 35%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_VALUE_PADDING_LEFT: 1%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_VALUE_WIDTH: 55%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BELOW_DESCRIPTION_PADDING_TOP: 4%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BELOW_DESCRIPTION_WIDTH: 93%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_PADDING_TOP: 2%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_PADDING_LEFT: 6%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_PADDING_LEFT: 7%;
@ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_BELOW_PADDING_TOP: 2%;


// MenuTopLayout
@MENU_TOP_LAYOUT_PADDING_LEFT: 0pt;
@MENU_TOP_LAYOUT_PADDING_RIGHT: 0pt;
@MENU_TOP_LAYOUT_PADDING_TOP: 0pt;
@MENU_TOP_LAYOUT_PADDING_BOTTOM: 0pt;
@MENU_TOP_BORDER_THICKNESS: 0.25pt;
@MENU_TOP_SHADOW_VLEN: 2;
@MENU_TOP_SHADOW_BLUR: 3;
@MENU_TOP_BG_BORDER_MARGIN_TOP: 10pt;

// App Logo Panel
@APP_LOGO_SIZE: 38pt;
@APP_PANE_LABEL_WIDTH: 140pt;
@APP_PANE_PADDING_X: 8pt;
@APP_PANE_PADDING_Y: 6pt;
@APP_PANE_WIDTH: @APP_LOGO_SIZE + @APP_PANE_LABEL_WIDTH + 3 * @APP_PANE_PADDING_X;
@APP_PANE_HEIGHT: @APP_LOGO_SIZE + 2 * @APP_PANE_PADDING_Y;
@APP_LABEL_PADDING_TOP: (@APP_LOGO_SIZE - @font-size-h3 - @font-size-h3 * @FONT_SIZE_VSMALL_FACTOR - 5pt) / 2;

// MenuTopLayout Btn
@MENU_TOP_BTN_WIDTH: @APP_PANE_HEIGHT;

// MenuTopLayout Nav
@MENU_TOP_NAV_ITEM_FONT_SIZE: 10pt;
@MENU_TOP_NAV_ITEM_FONT_WEIGHT: normal;
@MENU_TOP_NAV_ITEM_MIN_WIDTH: @MENU_TOP_BTN_WIDTH * 1.5;
@MENU_TOP_NAV_ITEM_PADDING: 20pt;
@MENU_TOP_NAV_ITEM_HOVER_BG_COLOR: extract(@CLR_1, 7) + #060606;
@MENU_TOP_NAV_APP_SWITCHER_ARROW_LEFT_POSITION:(@APP_SWITHCER_POPOVER_WIDTH) - (@MENU_TOP_BTN_WIDTH / 2);

// Main Page Nav Left
@MAIN_NAV_LEFT_PADDING_TOP: @APP_PANE_HEIGHT - @DEFAULT_SHADOW_VLEN;

// App Swithcer
@APP_SWITCHER_POSITION_TOP: @APP_PANE_HEIGHT;
@APP_SWITHCER_POSITION_LEFT: 0;
@APP_SWITHCER_POPOVER_WIDTH: @APP_PANE_WIDTH + @MENU_TOP_BTN_WIDTH;
@APP_SWITHCER_WIDTH: @APP_PANE_HEIGHT - @DEFAULT_SHADOW_VLEN + 1pt;
@APP_SWITHCER_HEIGHT: @APP_SWITHCER_WIDTH;
@APP_SWITCHER_ARROW_LEFT_POSITION: (@APP_SWITHCER_WIDTH / 2);
@APP_SWITHCER_PADDING_TOP: 10px;
@APP_SWITHCER_PADDING_LEFT: 0px;
@APP_SWITHCER_PADDING_RIGHT: 0px;
@APP_SWITHCER_PADDING_BOTTOM: 0px;
@APP_SWITHCER_MORE_BTN_HEIGHT: 50px;
@APP_SWITHCER_CONTENT_WIDTH: 482px;
@APP_SWITHCER_APP_ITEM_PADDING_BOTTOM: 15px;
@APP_SWITCHER_WINDOW_SIZE: 18px;
@APP_SWITCHER_WINDOW_PADDING_LEFT: 23px;
@APP_SWITCHER_WINDOW_PADDING_TOP: 23px;
@APP_SWITCHER_WINDOW_GAP: 2px;
@APP_SWITCHER_WINDOW_ROTATE_DEG: 90deg;
@APP_SWITCHER_WINDOW_INNER_SQUARE: (@APP_SWITCHER_WINDOW_SIZE - @APP_SWITCHER_WINDOW_GAP) / 2;
@APP_SWITCHER_WINDOW_TRANSITION_DURATION: 1s;

// App addon drawer
@APP_ADD_ON_DRAWER_HEIGHT: @APP_PANE_HEIGHT - @DEFAULT_SHADOW_VLEN + 1pt;
@APP_ADD_ON_DRAWER_POSITION_TOP: @APP_PANE_HEIGHT;
@APP_ADD_ON_DRAWER_HOVER_BG_COLOR: extract(@CLR_BRAND_HUE, 4) + #1E1E1E;
@APP_ADD_ON_DRAWER_BTN_WIDTH: @MENU_TOP_BTN_WIDTH;
@APP_ADD_ON_DRAWER_WIDTH: @APP_ADD_ON_DRAWER_BTN_WIDTH + @APP_NOTIFIER_BTN_WIDTH + @APP_USER_INFO_BTN_WIDTH;
@APP_ADD_ON_DRAWER_BORDER_THICKNESS: 1pt;
@APP_ADD_ON_DRAWER_SHADOW_VLEN: @MENU_TOP_SHADOW_VLEN;
@APP_ADD_ON_DRAWER_SHADOW_BLUR: @MENU_TOP_SHADOW_BLUR;
@APP_ADD_ON_DRAWER_TRANSITION_DURATION: 450ms;
@APP_ADD_ON_DRAWER_BOX_PADDING_TOP: 18pt;
@APP_ADD_ON_DRAWER_BOX_PADDING_LEFT: @APP_ADD_ON_DRAWER_BOX_PADDING_TOP + 2pt;
@APP_ADD_ON_DRAWER_BOX_WIDTH: 10pt;
@APP_ADD_ON_DRAWER_BOX_HEIGHT: 5pt;
@APP_ADD_ON_DRAWER_BOX_GAP: 2pt;
@APP_ADD_ON_DRAWER_HANDLE_SIZE: 5pt;
@APP_ADD_ON_DRAWER_HANDLE_MARGIN_TOP: -9pt;

// Notifier
@APP_NOTIFIER_POSITION_TOP: @APP_PANE_HEIGHT;
@APP_NOTIFIER_BTN_WIDTH: @MENU_TOP_BTN_WIDTH;
@APP_NOTIFIER_BELL_WIDTH: 20pt;
@APP_NOTIFIER_BELL_HEIGHT: @APP_NOTIFIER_BELL_WIDTH;

// User info
@APP_USER_INFO_POSITION_TOP: @APP_PANE_HEIGHT;
@APP_USER_INFO_BTN_WIDTH: @MENU_TOP_BTN_WIDTH * 3;

// version history
@VERSION_HISTORY_HEADER_HEIGHT: 80pt;
@VERSION_HISTORY_BODY_HEIGHT: 310pt;
@VERSION_HISTORY_HEADER_BORDER_THICKNESS: 1pt;
@VERSION_HISTORY_TAB_BORDER_THICKNESS: 4pt;
@VERSION_HISTORY_ROW_BORDER_THICKNESS: 1pt;
@VERSION_HISTORY_WRAPPER_PADDING_LEFT: @COMPONENT_DIALOG_WRAPPER_PADDING;
@VERSION_HISTORY_WRAPPER_PADDING_RIGHT: @VERSION_HISTORY_WRAPPER_PADDING_LEFT;
@VERSION_HISTORY_WRAPPER_PADDING_TOP: 15pt;
@VERSION_HISTORY_HEADER_LEFT_HEIGHT: @VERSION_HISTORY_HEADER_HEIGHT - @VERSION_HISTORY_WRAPPER_PADDING_TOP;
@VERSION_HISTORY_HEADER_LEFT_FIRST_HEIGHT: 35pt;
@VERSION_HISTORY_HEADER_LEFT_FIRST_DESCRIPTION_HEIGHT: 15pt;
@VERSION_HISTORY_HEADER_LEFT_FIRST_TITLE_HEIGHT: @VERSION_HISTORY_HEADER_LEFT_FIRST_HEIGHT - @VERSION_HISTORY_HEADER_LEFT_FIRST_DESCRIPTION_HEIGHT;
@VERSION_HISTORY_HEADER_LEFT_SECOND_HEIGHT: @VERSION_HISTORY_HEADER_LEFT_HEIGHT - @VERSION_HISTORY_HEADER_LEFT_FIRST_HEIGHT;
@VERSION_HISTORY_HEADER_LEFT_TAB_PADDING_TOP: 10pt;
@VERSION_HISTORY_HEADER_RIGHT_HEIGHT: @VERSION_HISTORY_HEADER_LEFT_HEIGHT;
@VERSION_HISTORY_HEADER_RIGHT_FIRST_HEIGHT: 35pt;
@VERSION_HISTORY_HEADER_RIGHT_SECOND_HEIGHT: @VERSION_HISTORY_HEADER_RIGHT_HEIGHT - @VERSION_HISTORY_HEADER_RIGHT_FIRST_HEIGHT;
@VERSION_HISTORY_HEADER_RIGHT_SECOND_DATE_HEIGHT: @VERSION_HISTORY_HEADER_RIGHT_SECOND_HEIGHT / 2;
@VERSION_HISTORY_HEADER_CALENDAR_LOGO_SIZE: 15pt;
@VERSION_HISTORY_HEADER_CALENDAR_LOGO_MARGIN_TOP: 5pt;
@VERSION_HISTORY_DROPDOWN_WIDTH: 90pt;
@VERSION_HISTORY_DROPDOWN_HEIGHT: 20pt;
@VERSION_HISTORY_DROPDOWN_LABEL_PADDING_LEFT: 5pt;
@VERSION_HISTORY_TABLE_ROW_HEIGHT: 50pt;
@VERSION_HISTORY_DATE_PICKER_MARGIN_TOP: 3pt;
@VERSION_HISTORY_DATE_PICKER_WIDTH: 70pt;
@VERSION_HISTORY_PADDING_ICON: 5pt;
@VERSION_HISTORY_MATERIAL_DATE_PICKER_MARGIN_TOP: -5pt;