body{
    font-family: Century Gothic;
    color: #333;
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.2px;
}
  
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
html, body, #main{
    width: 100%;
    height: 100%;
    font-family: Century Gothic;
    overflow-x: hidden;
}
#footer{
    background-color: #f8f9fa !important;
    padding: 20px 0px;
    font-size: 15px;
    margin: 0;
}
#footer span{
    padding-left: 140px;
}
#header{
    position: relative;
    width: 100%;
    height: 150px;
}
#header .container{
    max-width: 1140px;
    width: 90%;
    margin: 0 auto;
    overflow:hidden;
}
#header .container .logo{
    width: 280px;
    display: inline-block;
    vertical-align: middle;
}
#header .logo_bar{
    position: absolute;
    top: 0;
    width: 100%;
    height: 150px;
    background-color: #f8f9fa !important;
    z-index: -1;
}
#header .school_name_container{
    display: inline-block;
    vertical-align: middle;
}
#header .school_name{
    font-family: Britannic Bold, Microsoft YaHei UI;
    color: #004B97;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3em;
    text-shadow: 2px 2px 6px #b0b0b0;
}
.bold{
    font-weight: bold;
}
.logo_school_name{
    margin-top: 10px;
    text-align: center;
}
#finish_form{
    display: none;
    width: 90%;
    margin: 0 auto;
    max-width: 958px;
    padding-bottom: 100px;
}
#finish_form #finish_title{
    margin-top: 15px;
}
#finish_form #home_r{
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}
#finish_form .debenture_form_btn{
    width: 220px;
    display: inline-block;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
}
#finish_form .debenture_form_btn.personal{
    /* float: left; */
}
#finish_form .debenture_form_btn.corporate{
    float: right;
}
#finish_form a{
    text-decoration: none;
    color: #FF6600;
}
.application_remarks{
    margin: 15px;
}
.application_remarks .r{
    margin: 0;
    margin-bottom: 1rem;
}
.application_remarks ul{
    margin-left: 40px;
}
#reg_form{
    width: 90%;
    margin: 0 auto;
    max-width: 1058px;
    padding-bottom: 100px;
}
#reg_form input{
    margin: 0px 4px;
    padding: 6px 0px 6px 8px;
    margin-left: 0;
    border: 1px solid #d3d0d1;
    width: 100%;
    color: #737272;
}
#reg_form select{
    padding: 5px 2px;
    border: 1px solid #d3d0d1;
    color: #737272;
}
#reg_form #id_input{
    width: 323px;
}
#reg_form #district{
    width: 195px;
    margin-left: 0px;
    display:block;
}
#reg_form #district_code{
    width: 205px;
    display: none;
}
#reg_form .addr{
    width: 195px;
}
#reg_form .btn{
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
}
.KLN_btn{
    color: #fff;
    background-color: #8ddfc9;
    border-color: #8ddfc9;
}
.KLN_btn:hover{
    color: #fff;
    background-color: #52b59a;
    border-color: #52b59a;
}
.HKS_btn{
    color: #fff;
    background-color: #71cde2;
    border-color: #71cde2;
}
.HKS_btn:hover{
    color: #fff;
    background-color: #2fa1bb;
    border-color: #2fa1bb;
}
.LP_btn{
    color: #fff;
    background-color: #3fa435;
    border-color: #3fa435;
}
.LP_btn:hover{
    color: #fff;
    background-color: #3f8b38;
    border-color: #3f8b38;
}
#reg_form .support_browsers{
    color: #4EA3A3;
    background: #C7E2E1;
}
.f_header{
    width: 160px;
    vertical-align: top;
}
.f_family{
    width: 242px;
}
.dob_span{
    width: 125px;
}
.radio_span{
    width: 128px;
}
.radio_label{
    margin-left: -8px;
    margin-right: 8px;
}
.bottom_text{
    margin-left: 2px;
    display: block !important;
}
#classes_title{
    color: #004B97;
    font-weight: bold;
    font-size: 20px;
    margin: 15px;
}
#classes_preview_title{
    color: blue;
    margin: 15px;
    display: none;
}
.KLN{
    background-color: #8ddfc9;
}
.HKS{
    background-color: #71cde2;
}
.LP{
    background-color: #3fa435;
}
.section_header{
    padding: 8px;
    padding-left: 15px;
    color: white;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 60px;
}
.section_header:first-child {
    margin-top: 10px;
}
.f_span{
	display: table-cell;
	white-space: nowrap;
	margin-right: 2px;
	position: relative;
    /* width: 50%; */
    padding-left: 8px;
    vertical-align: text-top;
}
.red{
    color: red;
}
.r {
    display: inline-block;
    width: 100%;
    margin: 6px 0px;
}
.r div{
    display: inline-table;
}
.c  { float: left; width: 50%; display: inline-table;}
.c01{ float: left; width: 1%; display: inline-table;}
.c02{ float: left; width: 2%; display: inline-table;}
.c05{ float: left; width: 5%; display: inline-table;}
.c06{ float: left; width: 6%; display: inline-table;}
.c07{ float: left; width: 7%; display: inline-table;}
.c08{ float: left; width: 8%; display: inline-table;}
.c09{ float: left; width: 9%; display: inline-table;}
.c095{ float: left; width: 9.5%; display: inline-table;}
.c1 { float: left; width: 10%; display: inline-table;}
.c105 { float: left; width: 10.5%; display: inline-table;}
.c11{ float: left; width: 11%; display: inline-table;}
.c12{ float: left; width: 12%; display: inline-table;}
.c125{ float: left; width: 12.5%; display: inline-table;}
.c13{ float: left; width: 13%; display: inline-table;}
.c14{ float: left; width: 14%; display: inline-table;}
.c143{ float: left; width: 14.3%; display: inline-table;}
.c15{ float: left; width: 15%; display: inline-table;}
.c155{ float: left; width: 15.5%; display: inline-table;}
.c16{ float: left; width: 16%; display: inline-table;}
.c165{ float: left; width: 16.5%; display: inline-table;}
.c17{ float: left; width: 17%; display: inline-table;} 
.c175{ float: left; width: 17.5%; display: inline-table;} 
.c18{ float: left; width: 18%; display: inline-table;} 
.c19{ float: left; width: 19%; display: inline-table;} 
.c20{ float: left; width: 20%; display: inline-table;}
.c21{ float: left; width: 21%; display: inline-table;}
.c22{ float: left; width: 22%; display: inline-table;}
.c225{ float: left; width: 22.5%; display: inline-table;}
.c23{ float: left; width: 23%; display: inline-table;}
.c25{ float: left; width: 25%; display: inline-table;}
.c26{ float: left; width: 26%; display: inline-table;}
.c27{ float: left; width: 27%; display: inline-table;}
.c28{ float: left; width: 28%; display: inline-table;}
.c297{ float: left; width: 29.7%; display: inline-table;}
.c30{ float: left; width: 30%; display: inline-table;}
.c31{ float: left; width: 31%; display: inline-table;}
.c32{ float: left; width: 32%; display: inline-table;}
.c33{ float: left; width: 33%; display: inline-table;}
.c333{ float: left; width: 33.3%; display: inline-table;}
.c34{ float: left; width: 34%; display: inline-table;}
.c35{ float: left; width: 35%; display: inline-table;}
.c38{ float: left; width: 38%; display: inline-table;}
.c39{ float: left; width: 39%; display: inline-table;}
.c4 { float: left; width: 40%; display: inline-table;}
.c40{ float: left; width: 40%; display: inline-table;}
.c41{ float: left; width: 41%; display: inline-table;}
.c415{ float: left; width: 41.5%; display: inline-table;}
.c42{ float: left; width: 42%; display: inline-table;}
.c425{ float: left; width: 42.5%; display: inline-table;}
.c43{ float: left; width: 43%; display: inline-table;}
.c45{ float: left; width: 45%; display: inline-table;}
.c453{ float: left; width: 45.3%; display: inline-table;}
.c46{ float: left; width: 46%; display: inline-table;}
.c465{ float: left; width: 46.5%; display: inline-table;}
.c47{ float: left; width: 47%; display: inline-table;}
.c48{ float: left; width: 48%; display: inline-table;}
.c485{ float: left; width: 48.5%; display: inline-table;}
.c49{ float: left; width: 49%; display: inline-table;}
.c495{ float: left; width: 49.5%; display: inline-table;}
.c50{ float: left; width: 50%; display: inline-table;}
.c505{ float: left; width: 50.5%; display: inline-table;}
.c51{ float: left; width: 51%; display: inline-table;}
.c515{ float: left; width: 51.5%; display: inline-table;}
.c52{ float: left; width: 52%; display: inline-table;}
.c54{ float: left; width: 54%; display: inline-table;}
.c55{ float: left; width: 55%; display: inline-table;}
.c57{ float: left; width: 57%; display: inline-table;}
.c575{ float: left; width: 57.5%; display: inline-table;}
.c58{ float: left; width: 58%; display: inline-table;}
.c6 { float: left; width: 60%; display: inline-table;}
.c65{ float: left; width: 65%; display: inline-table;}
.c66{ float: left; width: 66%; display: inline-table;}
.c666{ float: left; width: 66.6%; display: inline-table;}
.c67{ float: left; width: 67%; display: inline-table;}
.c68{ float: left; width: 68%; display: inline-table;}
.c70{ float: left; width: 70%; display: inline-table;}
.c71{ float: left; width: 71%; display: inline-table;}
.c73{ float: left; width: 73%; display: inline-table;}
.c75{ float: left; width: 75%; display: inline-table;}
.c80{ float: left; width: 80%; display: inline-table;}
.c815{ float: left; width: 81.5%; display: inline-table;}
.c835{ float: left; width: 83.5%; display: inline-table;}
.c85{ float: left; width: 85%; display: inline-table;}
.c87{ float: left; width: 87%; display: inline-table;}
.c9 { float: left; width: 90%; display: inline-table;}
.c93 { float: left; width: 93%; display: inline-table;}
.c94 { float: left; width: 94%; display: inline-table;}
.c96{ float: left; width: 96%; display: inline-table;}
.c98{ float: left; width: 98%; display: inline-table;}
.c987{ float: left; width: 98.7%; display: inline-table;}


label[for], label {
    cursor: pointer;
}
input[type='radio'], input[type='checkbox'] {
    width: auto !important;
    margin: 0px 4px;
}
#BIRTHDAY_Y,
#APPLICATION_Y{
    width: 40px !important;
}
#BIRTHDAY_M, #BIRTHDAY_D,
#APPLICATION_M, #APPLICATION_D{
    width: 20px !important;
}
#reg_form #city_others{
    margin-left: 5px;
    width: 155px;
}
#reg_form #sibling_current, #reg_form #sibling_past{
    width: 550px;
    margin-left: 10px;
}
#reg_form #spoken_other{
    width: 440px;
}
#reg_form #family_child_no, #reg_form #birth_order{
    width: 40px;
}
#reg_form .radio_input{
    width: 270px;
    margin-left: 10px;
}
#reg_form .radio_primary{
    margin-right: 30px;
}
#reg_form #class_remark{
    width: 750px;
}
#reg_form #print_name{
    width: 200px;
}
#reg_form .class_and_time_header{
    padding: 0 8px;
}
#reg_form .class_list_r{
    padding: 0 8px;
}
#reg_form .reg_form_file {
    display: inline-block;
    border: 0;
    width: 80px;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
#reg_form .star{
    color: red;
}
#reg_form .preview_val{
    font-weight: bold;
    padding-left: 0;
}
#reg_form .class_and_time .preview_val{
    width: 60px;
}
#reg_form .hidden{
    display: none;
}
#reg_form .show{
    display: inline-block !important;
}
#reg_form .submit_group{
    display: none;
}
form.parent .f_span{
    min-width: 130px;
}
.class_list_r  .f_span{
    width: 50%;
}
.no_padding_left{
    padding-left: 0;
}
.text_center{
    text-align: center;
}
.KLN_class{
    background-color: #9fefda;
}
.HKS_class{
    background-color: #B1E0F3;
}
.LP_class{
    background-color: #bfe9bb;
}
@media (max-width: 1200px){
    #header .school_name{
        font-size: 22px;
    }
}
@media (max-width: 1070px){
    .r{
        margin: 0;
    }
    .r div {
        display: block;
        margin-bottom: 6px;
    }
    .r div span{
        display: inline-block;
        width: 95%;
        padding-left: 0;
    }
    .f_span_2{
        width: 65% !important;
    }
    .dob_span{
        padding-left: 8px !important;
    }
    .r div span:first-child{
        padding-left: 8px;
        vertical-align: top;
        white-space: pre-wrap;
    }
    .r div .radio_label:first-child{
        padding-left: 8px;
    }
    .student_address{
        margin: 0 !important;
        margin-left: 30% !important;
        padding-left: 9px;
    }
    .yes_no_span{
        width: 100% !important;
        padding-left: 8px !important;
        display: block !important;
    }
    .yes_no_span:first-child{
        margin-bottom: 6px;
    }
    .yes_no_span label{
        width: 30%;
    }
    .pre-wrap{
        white-space: pre-wrap;
    }
    form.student .f_span:first-child{
        white-space: pre-wrap;
    }
    .student_address span:first-child{
        padding-left: 6px !important;
    }
    .student_address .bottom_text{
        margin-left: 7px !important;
    }
    #reg_form input{
        width: 100%;
    }
    #reg_form #id_input{
        width: 100% !important;
    }
    #reg_form #spoken_other, #reg_form #family_child_no, #reg_form #birth_order, #reg_form #family_child_no, #reg_form #birth_order{
        width: 100%;
    }
    .class_and_time_header{
        margin-bottom: 10px;
    }
    .class_and_time_header, .class_list_r{
        font-size: 14px;
    }
    .class_and_time_r span{
        width: unset !important;
    }
    .class_list_r div span:first-child {
        width: 50%;
        padding-left: 0px;
    }
    .ui-spinner .ui-icon{
        width: 100% !important;
    }
    .class_list_r div span {
        display: table-cell;
    }
    .class_list_r div{
        display: table-cell;
    }
    .class_and_time_r .CLASS_AM, .class_and_time_r .CLASS_PM, .class_list_r .CLASS_AM,.class_list_r .CLASS_PM{
        width: 49% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        display: inline-block;
    }
    .class_and_time_r span{
        padding-left: 0 !important;
    }
    .r div .AMPM_span{
        display: inline-block;
        width: 30% !important;
    }
    .ui-spinner{
        padding-left: 0 !important;
        width: unset !important;
    }
    #class_remark{
        width: 100%;
    }
    form.submission_of_application .description{
        width: 100% !important;
    }
    form.consent_details .f_span{
        width: 49% !important;
        white-space: pre-wrap;
        padding-left: 0 !important;
    }
    form.consent_details span{
        width: unset !important;
    }
    form.class_and_time .f_span{
        white-space: pre-wrap;
    }
    .star{
        width: unset !important;
    }
    .btn {
        display: inline-block !important;
    }
    #reg_form #district{
        width: 100%;
    }
    #reg_form #district_code{
        width: 102%;
    }
    #reg_form .addr{
        width: 100%;
    }
    #reg_form #sibling_current, #reg_form #sibling_past{
        width: 100%;
    }
    #class_remark, #class_remark_text{
        width: 100% !important;
    }
}
@media (max-width: 1070px){
    .logo_school_name{
        display: none;
    }
    #header .container{
        text-align: center;
    }
}
@media (max-width: 820px){
    .can_hide{
        display: none !important;
    }
    .can_combine{
        display: block !important;
    }
    .currency{
        display: block;
    }
    .can_shorter{
        width: 40% !important;
    }
    .can_shorter .f_span{
        width: 100% !important;
    } 
    .mobile{
        display: inline-block !important;
    }
    .mobile_hide{
        display: none !important;
    }
    .mobile_larger{
        width: 20% !important;
    }
}
@media (max-width: 630px){
    input[name='QTY']{
        width: 30px !important;
    }
    .ui-spinner{
        width: 35px !important;
    }
}
@media (max-width: 560px){
    #reg_form{
        width: 98%;
    }
    #footer span{
        padding-left: 0;
    }
    .name_of_parent{
        width: 100% !important;
    }
    form.parent .f_span{
        min-width: unset;
    }
    #reg_form .radio_input {
        width: 50%;
        margin-left: 0px;
    }
    .reg_date{
        width: 100%;
        text-align: left !important;
    }
    .reg_date span{
        padding-left: 0 !important;
    }
    body{
        font-size: 15px;
    }
    #classes_title{
        font-size: 18px;
    }
    .r div span{
        display: block;
    }
    .f_span {
        width: 100% !important;
    }
    #reg_form .star{
        display: inline-block !important;
    }
    .student_address{
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    .student_address .f_span{
        padding-left: 0 !important;
    }
    .student_address span:first-child{
        padding-left: 0 !important;
    }
    #reg_form{
        width: 95%;
    }
    #reg_form .radio_input{
        display: block;
        width: 100%;
    }
    form.consent_details .f_span{
        width: 100% !important;
    }
    #reg_form #print_name{
        width: 100%;
    }
    #reg_form input {
        padding: 6px 0px 6px 0px;
    }
    .yes_no_span{
        padding-left: 0 !important;
    }
    .r div span:first-child{
        padding-left: 0 !important;
    }
    #reg_form #sibling_current, #reg_form #sibling_past{
        padding-left: 0 !important;
        margin-left: 0;
    }
    .class_and_time_r .CLASS_AM, .class_and_time_r .CLASS_PM{
        display: table-cell;
    }
    .ui-spinner{
        float: right;
    }
}


#dialog_flex{	
	position: fixed;
	width: 100%;
	height: 100%;
	/* min-width: 1425px;	 */
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1000;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(255, 255, 255);
	/* RGBa with opacity */
	background: rgba(255, 255, 255, 0.8);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)";
	cursor: default;
}
#dialog_flex .dialog_content{
	position: absolute;
	max-width: 680px;
	height: 50px;
	background: white;
	left: 0px; right: 0px; top: 100px;
	margin: auto auto;
	border-style: solid;
	border-width: 5px;
	border-color: #D6D5D5;		
	display: flex;
    flex-direction: row;
}
#dialog_flex .dialog_msg{
	margin-left: 30px;
	width: 500px;
	font-size: 25px;	
	color: black;
	line-height: 50px;
	word-wrap: break-word;
	flex: 1;
}
#dialog_flex .dialog_button_group{
	margin-right: 15px;
	width: auto;
	font-size: 18px;	
	color: #ffffff;	
	flex: 0 0 auto;
    max-width: 120px;
}
#dialog_flex .dialog_button_group .dialog_button{		
	margin-right: 15px;
	float: right;
	min-width: 97px;
	height: 30px;
	line-height: 30px;	
	margin-top: 10px;	
	text-align: center;
	cursor: pointer; cursor: hand;	
	background-color: #0055ff;	
	padding-left: 4px;
	padding-right: 4px;
}
#dialog_flex .dialog_button_group .cancel{
	background-color: #ff0033;	
}
@media (max-width: 780px){
	#dialog_flex .dialog_content{
		max-width: 90%;	
	}
}