/*******************/
/* 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; }

/* ==== 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-top: 10px; }
.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_submitTitle { font-size: 30px; font-weight: bold; color: var(--f7-theme-color); font-family: 'Oxygen'; }
.pageEnd_appName { font-size: 15px; font-weight: 400; }
.pageEnd_appID { font-weight: 600; }
.pageEnd_image { width: 100%; max-width: 400px; }
.inputWidth { width: 100%; box-sizing: border-box; }
.payment_failTitle { font-size: 30px; font-weight: bold; color: #ff3b30; font-family: 'Oxygen'; }
.payment_inprogressTitle { font-size: 30px; font-weight: bold; color: #ff6b22; font-family: 'Oxygen'; }




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



/* ==== 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: 8px; 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_12px { font-size: 12px; }
.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; }



/*=== Custom Dialog ===*/
.md { --f7-dialog-border-radius: 13px; }
@media only screen and (max-width:767px) {
	.md .ph_dialog_button { width: 100%; }
}
@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 {/*	width: 100px;*/ }
.md .ph_custom_dialog .dialog-inner { padding-bottom: 8px; }
.md .ph_custom_dialog .dialog-buttons { margin-bottom: 8px; }



/*=== 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; min-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: #CCCCCC; --f7-theme-color-rgb: 204, 204, 204; --f7-theme-color-shade: #b8b8b8; --f7-theme-color-tint: #e0e0e0; --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_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;}



/*=== 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: #EEEEEE; 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; }
.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.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; }



/* 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;
}*/

.webkit-fill-available{
	width: -webkit-fill-available;
}

select:required:invalid {
  color: #999;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

.buttonBar2{
	margin: 0 0 20px 20px;
  width: auto;
  min-width: 120px;
  height: 40px;
}

.font-bold{
	font-weight: bold;
}

.user-select-none{	user-select: none;	}

.quantity_input{
	width: 20px;
	text-align: right;
	border: 1px solid gray;
	height: 25px;
}

.demographicBox{
	--f7-card-header-min-height: 38px;
	--f7-card-footer-min-height: 38px;
}

.demographicBox .card-content{
	max-height: 135px;
  overflow: auto;
}

.popup-600px{
	--f7-popup-tablet-height: 600px;
}

.popup-550px{
	--f7-popup-tablet-height: 550px;
}

.popup-500px{
	--f7-popup-tablet-height: 500px;
}

.popup-450px{
	--f7-popup-tablet-height: 450px;
}

.popup-400px{
	--f7-popup-tablet-height: 400px;
}

.popover-350px{
	--f7-popover-width: 350px;
}

.popover-250px{
	--f7-popover-width: 250px;
}

.popover-200px{
	--f7-popover-width: 200px;
}

.popover-150px{
	--f7-popover-width: 150px;
}

.plus-icon{
	font-size: 24px;
	user-select: none;
	cursor: pointer;
	color: #4cd964;
}

.minus-icon{
	font-size: 24px;
	user-select: none;
	cursor: pointer;
	color: #ff3b30;
}

.no-select-pointer{
	user-select: none;
	cursor: pointer;
}

.notes{
	--f7-badge-in-icon-size: 18px;
  --f7-badge-in-icon-font-size: 12px;
  -webkit-animation:zomm-in-out 0.8s infinite ease-in-out;
  -webkit-transform-origin:top;
}
@-webkit-keyframes swing{
  0%{-webkit-transform:rotate(-4deg)}
  50%{-webkit-transform:rotate(4deg)}
  100%{-webkit-transform:rotate(-4deg)}
}
@-webkit-keyframes zomm-in-out{
	0%{-webkit-transform: scale(1, 1)}
  50%{-webkit-transform: scale(1.15, 1.15)}
  100%{-webkit-transform: scale(1, 1)}
}

.item-label2{
	align-self: flex-start;
  padding-top: var(--f7-inline-label-padding-top);
}

.input-text, .input-text .item-inner{
	min-height: 35px !important;
}

.cart-card{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 8px 12px;
}

.SFC-background{
	background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.8) 100%),url('res/gunung_gading2.png');
  background-size: cover; /* Optional: Adjusts image to cover the element */
  background-position: top; /* Optional: Centers the background image */
  	
}
.form_title{
	color: white !important;
  white-space: normal !important;
  line-height: normal !important;
  font-family: 'Oxygen';
  font-size: 3em;
  font-weight: 700;
  margin: 30px;
  display: flex;
}
.form_content_box{
	background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px 40px;
  margin: 30px auto;
  max-width: 1024px;
}
@media only screen and (max-width:568px) {
	.form_content_box{padding: 30px 15px;}
}
.form_content_button{
	margin: 10px auto !important;
  width: 65% !important;
  height: 60px !important;
  text-transform: capitalize !important;
  line-height: 1.3;
  display: block;
}

.green_btn{
	background-color: green !important;
}

.orange_btn{
	background-color: orange !important;
}

.orange-text{
	color: orange;
}