/*******************/
/* Default ISM CSS */
/*******************/

/* ==== ISM theme color ==== */
:root { --f7-theme-color: #009999; --f7-theme-color-rgb: 0, 153, 153; --f7-theme-color-shade: #007070; --f7-theme-color-tint: #00c2c2; }

:root { --f7-button-border-radius: 10px; }

/* ==== Swiper Progress ==== */
:root { --swiper-navigation-size: 20px; /* for swiper left right button size*/ --swiper-bullet-size: 40px; /* for swiper left right button size*/ }
.progressText { text-align: center; width: auto; height: 20px; font-size: 10px; padding: 10px 6px 0px; }
.progressBullet { width: var(--swiper-bullet-size); height: var(--swiper-bullet-size); border: 0.5px solid #CCCCCC; border-radius: 50%; }
.progressLine:after { top: 32.5%; /*use this to control line vertical position*/ width: calc(100% - var(--swiper-bullet-size)); /*use this to control line width*/ border-bottom: 1px solid #CCCCCC; content: ''; position: absolute; }
.progressLine:after { left: calc(50% + var(--swiper-bullet-size)/2); }
.progressLine:first-of-type:before, .progressLine:last-of-type:after { display: none; }

/* ==== Others ==== */
:root { --f7-block-title-text-color: #333333; --f7-block-title-font-size: 18px; --f7-block-title-font-weight: 500; --f7-label-text-color: #333333; --f7-label-font-weight: 700; --f7-page-bg-color: #FFF; }
body { font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif; }
.f_family_segoe { font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; }
.item-input-outline .item-label { left: 0; }
.buttonBar { width: auto; min-width: 120px; height: 40px }
.align_vertical { display: flex !important; align-items: center !important; justify-content: center !important; }/*vertical align content, same with F7 class="display-flex align-items-center justify-content-center"*/
.custom_hr_gray { border: none; border-top: 1px solid #C8C8C8; }
.show_all_text { white-space: normal !important; line-height: normal !important; }
.cursor_pointer { cursor: pointer; }
.width_auto { width: auto; }
.f_22px { font-size: 22px; }
.f_capitalize { text-transform: capitalize; }
.f_align_top { vertical-align: top; }
.f_color_theme { color: var(--f7-theme-color) !important; }
.f_color_gray_333333 { color: #333333 !important; }
.b_color_theme { background-color: var(--f7-theme-color) !important; }
.b_color_gray_E7EAEE { background-color: #E7EAEE !important; }
.b_color_gray_E3E8E6 { background-color: #E3E8E6 !important; }
.success_image { width: 100%; max-width: 400px; }
.inputWidth { width: 100%; box-sizing: border-box; }





/* ------------------------------------------------------------------------------------------------------------------------- */
/*start of new changes*/

/* ==== Message ==== */
:root{
	--font-segoe : Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;

}

.success_submitTitle {
	font-family: var(--font-segoe);
	font-weight: bold;
	font-size: 60px;
	line-height: 69px;
	color: #40BB4F;
}

.success_appName {
	font-family: var(--font-segoe);
	font-weight: 550;
	font-size: 15px;
	line-height: 17px;
	color: #555555;
}

.success_appID {
	font-family: var(--font-segoe);
	font-weight: 550;
	font-size: 15px;
	line-height: 17px;
	color: #555555;
}

.success_message_link {
	font-family: var(--font-segoe);
	font-weight: 400;
	font-size: 15px;
	line-height: 17px;
	color: #7C7C7C;
}



/* ==== Form padding ==== */
.formListStyle { margin-top: 0px; }
@media only screen and (max-width:768px) {
	.ph_service_title { margin-right: 0; }
	.ism_chrono_style { height: 50px; margin-left: 0px !important; }

	/* for form inline label */
	.formListStyle .item-title.item-label { font-size: 14px !important; }
}

@media only screen and (min-width:768px) {
	.ph_service_title { margin-right: 200px;/*200 is good, status is long text*/ }
	.ism_chrono_style { height: 50px; position: absolute; top: 32px; }
	.formListStyle .item-title.item-label { font-size: 16px !important; }
}



/* ==== Form padding, trigger by phoenix js ==== */
.ph_m_form_margin { padding-left:5%; padding-right:5%; }
.ph_m_chrono {right: 5%; }
.md .ph_m_chrono {top: 87px; }
.ios .ph_m_chrono {top: 78px; }

.ph_w_form_width { max-width: 768px; }
.ph_w_chrono {right: 0; margin-right: 0 !important;}



/* ==== Form Style ==== */
.ph_service_title { white-space: normal !important; line-height: normal !important; margin-bottom: 15px !important; margin-left: 0; font-family: 'Oxygen'; font-size: 24px; font-weight: 700; }
.ph_block_title { white-space: normal !important; line-height: normal !important; margin-left: 0; margin-right: 0; }
.formListStyle li.item-content { padding-left: 0px; padding-right: 0px; }
.formListStyle li.item-content .item-inner { padding-left: 0px; padding-right: 0px; }
.formListStyle .item-title.item-label { white-space: normal !important; line-height: normal !important; }
.ph_accor_label { font-size: 18px !important; font-weight: 500 !important; white-space: normal !important; line-height: normal !important; }
:root { --f7-list-chevron-icon-color: #333333; }
/*to fix page can horizontal scroll bug, due to input's info have padding left of 12px, pushing it to right*/
.md .input-error-message, .md .input-info, .md .item-input-error-message, .md .item-input-info { width: calc(100% - 12px); }
.ios .item-input-info { margin-top: 0; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; }



/* ==== Swiper ==== */
.ph_swiper_container .swiper-wrapper { height: 90px; }
.ph_swiper_container .swiper-button-prev { left: 0px; }
.ph_swiper_container .swiper-button-next { right: 0px; }
.ph_swiper_container .swiper-button-prev, .ph_swiper_container .swiper-button-next { top: 33% !important; }



/* ==== Icon ==== */
.ph_i_input_right { position: absolute; right: 0; pointer-events: none; margin-right: 6px; }
.ios .ph_i_input_right { margin-top: -3px; }
.md .ph_i_input_right { margin-top: 16px; }

/* different when inline */
.ios .inline-labels .ph_i_input_right { margin-top: -26px; }
.md .inline-labels .ph_i_input_right { margin-top: -1px; }
.ph_i_chevron { font-size: 18px; }
.ios .inline-labels .item-input-wrap { width: 64%; }



/* ==== Radio Button ==== */
.ph_radio_wrap { line-height: 2.0 !important; }
.ph_radio_label { cursor: pointer; padding-left: 8px; }

/*hide underline, only apply for inline label, usually wide screen*/
.md .ph_radioBtn:not(.item-input-outline) .item-input-wrap:after { content: none; }
.md .formListStyle .item-input:not(.item-input-outline) .item-input-wrap:after { content: none; }



/* ==== F7 dropdown select ==== */
.input-dropdown-wrap:before, .input-dropdown:before { content: none; }
.ph_form_select { cursor: pointer; padding-right: 28px !important; padding-top: 9px; padding-bottom: 8px; white-space: normal !important; line-height: 1.4 !important; height: auto !important; }



/* ==== Smart Select ==== */
.ph_ss_title { white-space: normal !important;	/*line-height: 1.4 !important;*/ }

/*show all text if smart select item too long*/
.item-radio.item-content .item-title, .smart-select-page .item-inner, .smart-select-page .item-title { white-space: normal !important; line-height: normal !important; }

/*height to fix click area too big*/
.ph_ss_content { min-height: 40px !important; padding-right: 28px; }

/*height to fix click area too big*/
.ph_ss_inner { min-height: 40px !important;	/*margin-right: 13px;*/ padding-right: 0px !important; }
.item-input-error-message, .item-input-info { padding-left: var(--f7-input-outline-padding-horizontal); }
[class*="list smart-select-list"] li.disabled { display: none; }
[class*="list smart-select-list"] li:nth-child(2) { border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0; }



/* ==== Typography ==== */
.f_14px { font-size: 14px; }
.f_16px { font-size: 16px; }
.f_18px { font-size: 18px; }
.f_20px { font-size: 20px; }
.f_22px { font-size: 22px; }
.f_24px { font-size: 24px; }
.f_26px { font-size: 26px; }
.f_40px { font-size: 40px; }
.f_uppercase { text-transform: uppercase; }
.f_400 { font-weight: 400; }
.f_500 { font-weight: 500; }
.f_600 { font-weight: 600; }
.f_700 { font-weight: 700; }
.f_none { text-transform: none; }

.visibility_hidden { visibility: hidden; }
.b_color_gray_E6E6E6 { background-color: #E6E6E6 !important; }
.b_color_gray_F5F5F7 { background-color: #F5F5F7 !important; }



/*=== Custom Dialog ===*/
.md { --f7-dialog-border-radius: 13px; }
@media only screen and (max-width:767px) {
	.md .ph_dialog_button { width: -webkit-fill-available; }
}
@media only screen and (min-width:768px) {
	.ph_dialog_width { --f7-dialog-width: 700px; }
	.md .ph_custom_dialog .dialog-button { /*margin-right: 8px;*/ }
	.md .ph_dialog_button { width: 100px;/*width: 200px;*/ }
}
.ph_dialog_icon { font-size: 60px; color: #F9BB3A }
.ph_dialog_hr { border: none; border-top: 1px solid #C8C8C8; width: 200%; margin: 10px -100px 0px -100px; }
.ph_dialog_title { margin-top: 16px; font-size: 20px; font-weight: 600; }
.ph_dialog_message { margin-top: 16px; }
.ph_dialog_button { text-transform: capitalize; }
.md .ph_dialog_button { margin-left: 5px !important; margin-right: 5px !important; }
.md .ph_custom_dialog .dialog-inner { padding-bottom: 8px; }
.md .ph_custom_dialog .dialog-buttons { padding-top: 1.5px; padding-left: 5px; padding-right: 5px; }
.md .dialog-buttons-vertical.ph_custom_dialog .dialog-buttons { margin-bottom: 5px }


/*=== Custom Hr line ===*/
/* e.g. <hr class="ph_hr_gray"/> */
.ph_hr_gray { border: none; border-top: 1px solid #C8C8C8; margin-top: 16px; margin-bottom: 16px; }



/*=== Button bar ===*/
.ph_buttonbar_button { line-height: normal; text-transform: capitalize; display: flex !important; align-items: center !important; justify-content: center !important; margin-left: 16px; width: auto; min-width: 120px; height: 40px; }
@media only screen and (max-width:480px) {
	.ph_buttonbar_button { min-width: 100px; }
}



/*=== Tab bar ===*/
.ph_tabbar_button { line-height: normal; text-transform: capitalize; display: flex !important; align-items: center !important; justify-content: center !important; }



/*=== Tab in form ===*/
.ph_tab_header { padding-left: 0px; padding-right: 0px; }
@media only screen and (max-width:768px) {
	.ph_tab_header { width: auto !important; }
}



/*=== Popup ===*/
:root { --f7-popup-tablet-border-radius: 13px; --f7-popup-tablet-height: 600px; --f7-popup-tablet-width: 600px; }
.ph_popup_button_group { height: 30px; }
.ph_popup_button { margin-right: 16px; float: right; width: 100px; margin-bottom: 16px; text-transform: capitalize; }



/*=== Table ===*/
:root { --f7-table-cell-padding-horizontal: 8px; --f7-table-label-cell-padding-horizontal: 8px; }
.ph_table_bg_gray { background-color: #F9F9F9; /*EDEDED EBEBEB*/ }
.ph_table_th { height: 36px !important; font-size: 16px !important; font-weight: 600 !important; color: black !important; }



/*=== Table Attachment ===*/
.ph_table_file_button_box { border-radius: 4px; font-size: 14px;	/*cursor: pointer;*/ height: 40px; }
.ph_table_file_button_select, .ph_table_file_button_name { height: 40px; position: absolute; top: 0; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph_table_file_button_select { min-width: 80px; width: 25%; right: 0; text-transform: capitalize;	/*background-color: var(--f7-theme-color);*/ }
.ph_table_file_button_name { padding-top: 2px; justify-content: flex-start; display: block; width: 75%; left: 0; text-transform: none; text-align: left; box-sizing: border-box; padding-left: 10px; font-weight: 100; }
.ph_table_file_list ul:after { content: none; }
.ph_table_no_hairlines { --f7-table-cell-border-color: transparent; }
.ph_table_gray_hairlines {	/*--f7-table-cell-border-color: #333333;*/ }
.data-table tbody td:before { height: 2px; }



/*=== Input field ===*/
.ph_input_cursor:enabled { cursor: pointer; }
.ph_input_hide { visibility: hidden; height: 0px; display: block; }
.ph_input_select_btn {
	width: 80px;
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
	--f7-theme-color: #EEEEEE;
	--f7-theme-color-rgb: 238, 238, 238;
	--f7-theme-color-shade: #dadada;
	--f7-theme-color-tint: #ffffff;
	--f7-button-text-color: #000000;
}

.ph_input_file_name {
	min-width: 150px;
	padding-right: calc(80px + var(--f7-input-outline-padding-horizontal)) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ph_input_file_name::placeholder { color: black !important; }
.ph_input_file_icon { height: 40px; }
.ph_file_label_box {background-color: #EEEEEE; width: 40px; height: 40px; border-radius:50%; box-sizing: border-box; border: dashed 2px #AEAEAE;}
.ph_file_label_icon {font-size: 20px; color: #666666;}
.ph_m_upload_button { display: inline-block; width: auto; height: auto; border-radius: 10px; line-height: unset; }
.ph_m_upload_btn_text { font-weight: 500; color: #666666; }


/*=== Disable input ===*/
.item-link.smart-select.disabled { opacity: 1.0 !important; }
input:disabled { opacity: 1.0; }
select:disabled { opacity: 1.0; }
select:enabled + .ph_ss_content{ padding-left: 12px !important}
select:disabled + .ph_ss_content{ padding-left: 0px !important}



/*=== DragDrop Drag Drop ===*/
.ph_dragdrop_zone { width: 100%; margin-left: 0px; margin-right: 0px; background-color: #F5F5F7; border-radius: 10px; box-sizing: border-box; border: dashed 2px #AEAEAE; padding: 28px 0 }
.ph_dragdrop_file_name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.ph_dragdrop_icon { font-size: 50px; color: #666666; }
.ph_dragdrop_title { font-size: 20px; font-weight: 500; color: #666666; }
.ph_dragdrop_label { width: 150px; height: 42px; line-height:normal }

.ph_table_upload td { min-width: 22px; vertical-align: top; }



/*=== Color Theme ===*/
.ph_bg_color_theme { background-color: var(--f7-theme-color); }
.ph_text_color_theme { color: var(--f7-theme-color); }



/*=== Navbar ===*/
/* to add 5% margin on left in android (ios is center thus no need) */
.md .navbarHideShow .title { margin-left: calc(5% - 4px) !important; }



/*=== Note Style ===*/
.ph_note_box { border: 2px solid var(--f7-theme-color); border-radius: 10px; padding: 16px; margin-bottom: 20px; font-size: 14px; }
.ph_note_title { text-transform: uppercase; font-weight: 500; }
.ph_note_li { padding-inline-start: 15px; }
ul.ph_note_li li { margin-top: 8px; margin-bottom: 8px; }
.ph_upload_note { font-style: italic; font-size: 14px; line-height: 18px; }
.ph_upload_title { font-weight: 500; }



/*=== Agreement border ===*/
.ph_agreement_box { font-size: 14px; margin-top: 0}
.ph_agreement_title { text-transform: uppercase; font-weight: 500; margin-bottom: 8px; }
/*.ph_agreement_box .input-outline:after, .ph_agreement_box .item-input-outline .item-input-wrap:after { border: 2px solid #009999 !important; border-radius: 10px !important; }*/
.ph_agreement_box .input-outline:after, .ph_agreement_box .item-input-outline .item-input-wrap:after { border: none !important; }
.ph_agreement_box .input-outline.input-focused:after, .ph_agreement_box .item-input-outline.item-input-focused .item-input-wrap:after { border-color: #009999 !important; }
.ph_agreement_box .input-outline.input-invalid:after, .ph_agreement_box .item-input-outline.item-input-invalid .item-input-wrap:after { border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color)) !important; }




/*=== SVG image Color ===*/ /*https://stackoverflow.com/a/53336754*/
.svg_color_untick{
	filter: brightness(0) saturate(100%) invert(97%) sepia(4%) saturate(151%) hue-rotate(104deg) brightness(98%) contrast(87%);
}




/*=== Agreement border ===*/
.ph_photoBrowser_icon { color: gray; /*background-color: white; border-radius: 50%;*/ }

/* end of new changes */
/* ------------------------------------------------------------------------------------------------------------------------- */





/*******************/
/* Your Custom CSS */ /* write your custom css in this section */
/*******************/
.borderCheck1 {
	border: 2px solid #73AD21;
}

.borderCheck2 {
	-webkit-box-shadow: inset 0px 0px 0px 1px #73AD21;
	-moz-box-shadow: inset 0px 0px 0px 1px #73AD21;
	box-shadow: inset 0px 0px 0px 1px #73AD21;
}



/*:root {
	--f7-theme-color: #ff3b30;
	--f7-theme-color-rgb: 255, 59, 48;
	--f7-theme-color-shade: #ff1407;
	--f7-theme-color-tint: #ff6259;
}*/