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;
}
.small_text{
    font-size: 13.5px;
    white-space: normal !important;
}
#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 .rg_container{
    width: 90% !important;
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-content: center;
    text-align: center !important;
    height: 100%;
    align-items: center;
} */
#header .container .logo{
    width: 280px;
    display: inline-block;
    vertical-align: middle;
}
#header .container .rg_logo{
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}
#header .container .rg_logo_school_name{
    display: inline-block;
    vertical-align: middle;
}
#header .logo_bar{
    position: absolute;
    top: 0;
    width: 100%;
    height: 160px;
    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;
}
@font-face {
    font-family: Frutiger;
    src: url('assets/fonts/Britannic-Bold.TTF');
}
.rg_header .school_name{
    font-family: Britannic Bold, Microsoft YaHei UI !important;
    text-shadow: 2px 2px 6px #b0b0b0 !important;
}
.rg_container a {
    width: 280px;
    display: inline-block;
    vertical-align: middle;
}
/* .rg_header .logo_school_name{
    width: 75%; 
    margin: 0 auto;
} */
/* .rg_header .school_name_container{
    margin: 25px 0;
} */
.rg_header{
    /* background-image: url('assets/images/bg_top.jpeg'); */
    /* height: 200px !important; */
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0 auto;
    padding: 0px;
    margin-bottom: 20px;
}
.rg_header .school_name{
    font-size: 28px !important;
}
.bold{
    font-weight: bold;
}
.logo_school_name{
    margin-top: 10px;
    text-align: center;
}
/* .rg_header .logo_school_name{
    width: 450px;
} */
#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;
}
#reg_form{
    width: 90%;
    margin: 0 auto;
    max-width: 958px;
    padding-bottom: 100px;
}
.rg_reg_form{
    max-width: 1170px !important;
}
#reg_form input:not(.rg_input_extend,.rg_input_short,.reg_form_file_rg,.rg_security_code,.rg_input){
    margin: 0px 4px;
    padding: 6px 0px 6px 8px;
    margin-left: 0;
    border: 1px solid #d3d0d1;
    width: 122px;
    color: #737272;
}
#reg_form .rg_input{
    margin: 0px 4px;
    padding: 3px 0px 3px 5px;
    margin-left: 0;
    border: 1px solid #d3d0d1;
    width: 122px;
    color: #737272;
    font-size: 16px;
    font-family: Century Gothic;
    line-height: 1.5em;
    box-sizing: border-box;
}
#reg_form .rg_input_extend{
    margin: 0px 4px;
    padding: 3px 0px 3px 5px;
    margin-left: 0;
    border: 1px solid #d3d0d1;
    width: 200px;
    color: #737272;
    font-size: 16px;
    font-family: Century Gothic;
    line-height: 1.5em;
}
#reg_form .rg_input_short{
    margin: 0px 4px;
    padding: 3px 0px 3px 5px;
    margin-left: 0;
    border: 1px solid #d3d0d1;
    width: 50px;
    color: #737272;
    font-size: 16px;
    font-family: Century Gothic;
    line-height: 1.5em;
    box-sizing: border-box;
}
#reg_form .rg_security_code{
    padding: 1px 2px;
    border: 2px solid #d3d0d1;
    width: 50px;
    height: 24px;
    margin-right: 10px;
    color: #737272;
    font-size: 16px;
    font-family: Century Gothic;
    line-height: 1.5em;
}
#reg_form textarea{
    resize: none;
    width: 411px;
    margin: 0px 4px;
    padding: 6px 0px 6px 8px;
    margin-left: 0;
    border: 1px solid #d3d0d1;
    color: #737272;
}
#reg_form select{
    padding: 5px 2px;
    border: 1px solid #d3d0d1;
    color: #737272;
}
#reg_form #id_input{
    width: 323px;
}
#reg_form #district{
    width: 414px;
    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;
}
#reg_form .btn_rg{
    font-size: 14px;
    padding: 6px 12px;
    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;
}
.RGS_btn{
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.RGS_btn:hover{
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.RGN_btn{
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.RGN_btn:hover{
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
#reg_form .support_browsers{
    color: #4EA3A3;
    background: #C7E2E1;
}
.f_header{
    width: 160px;
    vertical-align: top;
}
.f_header_rg{
    min-width: 255px !important;
    white-space: pre-line !important;
}
.f_header_rg_extend{
    min-width: 385px !important;
}
.f_header_rg_mid_extend{
    min-width: 310px !important;
    text-align: justify !important;
    white-space: unset !important;
}
.f_family{
    width: 242px;
}
.dob_span{
    width: 125px;
}
.radio_span{
    width: 128px;
}
.radio_label{
    margin-left: -8px;
    margin-right: 8px;
}
.radio_label_rg{
    margin-left: 0px !important;
}
.bottom_text{
    margin-left: 2px;
    display: block !important;
}
#classes_title{
    color: #004B97;
    font-weight: bold;
    font-size: 20px;
    margin: 15px;
}
.rg_reg_form #classes_title{
    margin: 10px 15px
}
#classes_preview_title{
    color: blue;
    margin: 15px;
    display: none;
}
.KLN{
    background-color: #8ddfc9;
}
.HKS{
    background-color: #71cde2;
}
.LP{
    background-color: #3fa435;
}
.RGS{
    background-color: #BE1C2B;
}
.RGN{
    background-color: #BE1C2B;
}
.section_header{
    padding: 8px;
    padding-left: 15px;
    color: white;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 60px;
}
.rg_reg_form .section_header{
    padding: 5px 15px;
}
.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;
}
.rg_reg_form .f_span:not(.rg_primary_contact){
    padding-left: 15px;
}
#finish_form .f_span{
    padding-left: 15px;
}
.f_span_rg_one_field{
    width: 100%;
}
.red{
    color: red;
}
.r {
    display: inline-block;
    width: 100%;
    margin: 6px 0px;
}
.r div{
    display: inline-table;
}
.r_rg div:not(.rg_upload, .rg_full_address){
    width: 49.5%;
}
.rg_input_one_field{
    width: 97.75% !important;
}
.r_rg input:not(.rg_input_one_field,.rg_input_address,.rg_input_address_city_code,.rg_input_extend,[type='checkbox'],[type='radio'],.rg_input_short,.reg_form_file_rg){
    width: 95% !important;
}
.rg_input_address{
    width: 363px !important;
}
.rg_input_address_city_code{
    width: 150px !important;
}
.table_rg > tr > td{
    border: 1px solid #ddd;
    padding: 5px;
}
.table_rg{
    border-collapse: collapse;
}
#rg_hr{
    border: none;
    border-top: 1px dotted #333;
    color: #333;
    background-color: #fff;
    height: 1px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: content-box;
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
}
.rg_link{
    text-decoration: none;
    color: #FF6600;
}
.rg_finish_btn{
    width: 116px;
    -webkit-appearance: button;
    cursor: pointer;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    margin: 0;
}
.rg_finish_btn:nth-child(1){
    margin-right: 18px;
}
#finish_std_form{
    position: relative;
}
#finish_std_photo{
    position: absolute;
    right: 15px;
    top: 6px;
}
#finish_app_no{
    color: blue;
    cursor: text;
}
#footer_rg{
    height:60px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#footer_text_rg{
    font-size: 15px;
    color: #666666;
    padding-left:90px;
}
#finish_contact_text{
    margin-left: 15px;
}
.rg_btn_group{
    padding-left: 15px;
}
.r_rg_address{
    margin-bottom: 0;
}
.rg_reg_form .section_header:not(:first-child){
    margin-top: 25px;
}
.rg_class_text{
    white-space: pre-line !important;
}
.rg_mobile_br{
    display: none;
}
#rg_hear_about{
    padding-left: 15px;
}
.rg_hear_about_text{
    white-space: normal;
}
.rg_same_time_submit{
    white-space: normal;
    height: 100%;
    width: 60%;
}
.rg_primary_contact{
    padding-left: 25px;
}
.rg_sibling_input{
    margin-left: 30px; 
}
.rg_upload_text{
    white-space: pre-line;
    text-align: justify;
}
.rg_sibling_remind_text{
    padding-bottom: 30px;
}
.rg_sibling_age_header{
    width: 90px;
}
.rg_sibling_sex{
    white-space: unset;
    text-align: justify;
}
.rg_hidden{
    display: none !important;
}
.finish_class_header{
    width:100%;
    display: inline-table;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 15px;
    box-sizing: border-box;
}
.rg_container .logo_school_name{ 
    margin-top: 10px; 
    text-align: center;
} 
.rg_container .school_name{ 
    letter-spacing: 0px; 
}
.rg_name_of_parent{
    text-align: justify;
    white-space: break-spaces;
    width: 275px;
}
.rg_upload_file{
    display: inline-block !important;
}
.rg_upload_file_span{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.rg_file_name_label{
    cursor: default;
    display: inline-block;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    vertical-align: middle;
}
.rg_for_data_only{
    display: none;
}
.rg_print_name{
    margin-left: 30px;
}
.rg_child_info_header{
    margin-left: 30px;
}
.rg_preview_child_info_header{
    margin-left: 30px;
}
#error_form{
    padding-top: 20px;
}
.rg_full_address{
    padding-left: 15px;
    box-sizing: border-box;
}
.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{
    width: 40px !important;
}
#BIRTHDAY_M, #BIRTHDAY_D{
    width: 20px !important;
}
#BIRTHDAY_Y_rg{
    width: 50px !important;
}
#BIRTHDAY_M_rg, #BIRTHDAY_D_rg{
    width: 35px !important;
}
#reg_form #city_others{
    margin-left: 5px;
    width: 155px;
}
#reg_form #sibling_current, #reg_form #sibling_past{
    width: 532px;
    margin-left: 25px;
}
#reg_form #enroll_currently{
    width: 532px;
    margin-left: 3px;
}
#reg_form #spoken_other{
    width: 390px;
}
#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 .reg_form_file_rg {
    display: inline-block;
    border: 0;
    color: transparent;
    width: 140px;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
}
#reg_form .star{
    color: red;
}
#reg_form .preview_val{
    font-weight: bold;
}
#reg_form .class_and_time .preview_val{
    width: 60px;
}
.rg_reg_form .class_and_time .preview_val{
    width: 100px;
}
#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;
}
.RGN_class{
    background-color: #F3B6BC;
}
.RGS_class{
    background-color: #F3B6BC;
}
form.consent_details .f_span{
    padding-left: 0 !important;
}
.class_and_time_r span{
    padding-left: 7px;
    box-sizing: border-box;
}
.class_list_r_rg .CLASS_NAME{
    box-sizing: border-box;
}
.class_list_r .class_list_r_rg{
    box-sizing: border-box;
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
    display: inline-block;
}
#reg_form .class_list_r_rg{
    box-sizing: border-box;
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
    display: inline-block;
}
#reg_form .class_list_r_rg_rgn{
    box-sizing: border-box;
    padding: 5px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: inline-block;
}
.consent_details_rg{
    padding-left:15px;
    padding-right:15px;
}
form.class_and_time label{
    cursor: auto;
}
.mobile{
    display: none !important;
}
#class_remark_text{
    width: 750px;
    display: block;
    white-space: pre-wrap;
}
form.submission_of_application .description{
    padding-left: 8px;
}
form.submission_of_application .description_rg{
    padding-left: 15px;
    float: left;
    box-sizing: border-box;
    text-align: justify;
}
#finish_form .description_rg{
    padding-left: 15px;
    float: left;
    box-sizing: border-box;
    text-align: justify;
}
.color_bar {
    width:100%;
    height:60px;
    background:#f8f9fa;
}
#bottom_color_bar {
    position: absolute;
    z-index: -99;
    top: 0;
}
.col1 {
    float:left;
    width:40%;
    background:#f8f9fa;
    height:60px;
}
.col2 {
    float:left;
    width:20%;
    background:#f8f9fa;
    height:60px;
}
.col3 {
    float:left;
    width:15%;
    background:#f8f9fa;
    height:60px;
}
@media (max-width: 1200px){
    #header .school_name{
        font-size: 22px;
    }
    .rg_header .school_name{
        font-size: 22px !important;
    }
}
@media (max-width: 1070px){
    .r{
        margin: 0;
    }
    .rg_student_address{
        margin-top: -30px;
    }
    .r div {
        display: block;
        margin-bottom: 6px;
    }
    .r_rg div {
        width: 100%;
    }
    .f_header_rg:not(.rg_no_full_width_span){
        width: 100% !important;
    }
    .f_header_rg_extend{
        width: 100% !important;
    }
    .f_header_rg_mid_extend{
        width: 100% !important;
    }
    .r div span:not(.rg_sibling_input){
        display: inline-block;
        width: 65%;
        padding-left: 0;
    }
    .f_span_2{
        width: 65% !important;
    }
    .r div span:first-child{
        width: 30%;
        padding-left: 8px;
        vertical-align: top;
    }
    .rg_reg_form .r div .star{
        width: unset !important;
        padding-left: unset !important;
        vertical-align: unset !important;
    }
    .rg_reg_form .r div span:first-child:not(.f_span_rg_one_field,.rg_parent_header){
        width: 30%;
        padding-left: 15px;
        vertical-align: top;
    }
    .r div .radio_label:first-child{
        padding-left: 8px;
    }
    .r div .radio_label_rg:first-child{
        padding-left: 0;
    }
    .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;
    }
    .r_rg input:not([type='checkbox'],[type='radio'],#city_others,.rg_sibling_age,.reg_form_file_rg){
        width: 100% !important;
    }
    .r_rg #city_others{
        width: calc(100% - 150px - 13px) !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;
        margin-right: 0;
    }
    .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;
    }
    form.consent_details span{
        width: unset !important;
    }
    form.class_and_time .f_span:not(.f_span_rg_one_field,.rg_same_time_submit_selectbox,.rg_same_time_submit,.rg_no_pre_wrap){
        white-space: pre-wrap;
    }
    .star{
        width: unset !important;
    }
    .btn {
        display: inline-block !important;
    }
    .btn_rg {
        display: inline-block !important;
    }
    #reg_form #district{
        width: 100%;
    }
    #reg_form #district_code{
        width: 102%;
    }
    #reg_form .addr{
        width: 100%;
    }
    #reg_form textarea{
        width: 100%;
    }
    #reg_form #enroll_currently, #reg_form #sibling_current, #reg_form #sibling_past{
        width: 100%;
        margin: 0;
    }
    #class_remark, #class_remark_text{
        width: 100% !important;
    }
    .finish_mobile_90_width{
        width: 90% !important;
    }
    .finish_mobile_10_width{
        width: 10% !important;
    }
    .finish_mobile_auto_width{
        width: auto !important;
    }
    .rg_primary_contact{
        padding-left: 15px;
    }
    .rg_sibling_input{
        margin-left: 15px;
    }
    .rg_reg_form .class_and_time_r{
        padding-left: 8px;
    }
    .rg_preview_child_info_header{
        display: inline !important;
        margin-left: 0px;
    }
    .rg_name_of_parent{
        display: inline;
    }
    .rg_print_name{
        margin-left: 0;
    }
    .rg_file_name_label{
        width: 100%;
    }
}
@media (max-width: 1070px){
    .logo_school_name{
        display: none;
    }
    .rg_header .logo_school_name{
        display: none;
    }
    .r_rg div:not(.rg_upload, .rg_full_address){
        width: 100%;
    }
    #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: 780px){
    input[name='QTY']{
        width: 30px !important;
    }
    .ui-spinner{
        width: 35px !important;
    }
    .class_and_time .radio_primary{
        display: block;
    }
    #footer_rg,
    .color_bar,
    .col1,
    .col2,
    .col3 { 
        height: 30px;
    }
    /* #header .rg_container{
        grid-template-columns: unset;
        text-align: unset;
        align-items: unset;
    } */
    .rg_header .logo_school_name{
        display: none !important;
    }
    .rg_header .school_name_container{
        display: none !important;
    }
    .rg_logo{
        width: auto !important;
        height: auto;
    }
}
@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;
    }
    body{
        font-size: 15px;
    }
    #classes_title{
        font-size: 18px;
    }
    .r div span{
        display: block;
    }
    .f_span:not(.rg_no_full_width_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_date_div{
        width: 100%;
        text-align: left !important;
    }
    .reg_date_div span{
        padding-left: 0 !important;
    }
    #reg_form input {
        padding: 6px 0px 6px 0px;
    }
    #reg_form .rg_display_block {
        display: block;
    }
    #reg_form textarea {
        padding: 6px 0px 6px 0px;
    }
    .yes_no_span{
        padding-left: 0 !important;
    }
    .r div span:first-child:not(.f_span_rg_left_pad,.rg_parent_header,.f_header_rg_extend){
        padding-left: 0 !important;
    }
    .r_rg div span:first-child:not(.star){
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .r_rg_one_field div span:first-child:not(.star){
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .section_header{
        text-align: justify;
    }
    #reg_form #enroll_currently, #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;
    }
    #footer_text_rg{
        font-size: 12px;
        padding-left: 15px;
    }
    .rg_reg_form{
        font-size: 14px;
    }
    .rg_reg_form .f_span:not(.rg_print_name){
        padding-right: 15px;
        box-sizing: border-box;
    }
    .rg_reg_form #CITY_CODE{
        display: block;
    }
    .rg_reg_form #city_others{
        margin-left: 0px !important;
    }
    .r_rg_address{
        margin-bottom: 30px;
    }
    .r_rg_address_mobile{
        margin-bottom: 25px;
    }
    .r_rg_address_mobile_last{
        margin-bottom: 20px;
    }
    .rg_reg_form .section_header{
        margin-top: 30px;
    }
    .rg_class_text{
        white-space: pre-line;
        text-align: justify;
    }
    .rg_mobile_br{
        display: block;
    }
    .rg_same_time_submit{
        display: block;
    }
    .rg_mobile_mb{
        margin-bottom: 20px;
    }
    .rg_primary_contact{
        padding-left: 15px;
        white-space: normal;
    }
    .rg_parent_header{
        padding-left: 15px;
    }
    .rg_sibling_input{
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0;
        box-sizing: border-box;
        width: 100% !important;
    }
    .rg_sibling_remind_text{
        font-size: 85%;
    }
    .rg_sibling_age_header{
        width: 82px;
    }
    .rg_sibling_age_span{
        padding-left: 0 !important;
    }
    .rg_sibling_sex_header{
        min-width: 0 !important;
        max-width: 70px;
    }
    .rg_sibling_sex{
        padding-left: 8px !important;
    }
    .rg_mobile_hidden{
        display: none !important;
    }
    .RGS_class{
        padding-right: 0 !important;
        padding-left: 15px !important;
    }
    .rg_mobile_font_size{
        font-size: 0.9em;
    }
    .rg_hidden{
        display: flex !important;
    }
    #finish_std_photo{
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 200px;
        position: unset;
        top: 0;
    }
    .finish_mobile_90_width{
        width: 90% !important;
    }
    .finish_mobile_10_width{
        width: 10% !important;
    }
    .finish_mobile_auto_width{
        width: auto !important;
    }
    .finish_mobile_borderline{
        border-bottom: 2px dotted #EEEEEE;
    }
    #reg_form .reg_form_file_rg {
        width: 100px;
    }
    .rg_print_name{
        margin-left: 0;
    }
    .rg_child_info_header{
        margin-left: 15px;
    }
    .rg_preview_child_info_header{
        margin-left: 0;
    }
}
@media (min-width: 992px){
    .rgs_width {
        width: 970px;
    }
}
@media (min-width: 768px){
    .rgs_width {
        width: 750px;
    }
}
@media (max-width: 768px){
    .rg_header{
        /* background-image: url('assets/images/bg_top_m.jpg'); */
        height: 150px !important;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: 0 auto;
        padding: 0px;
        margin-bottom: 16px;
    }
    .rg_logo_school_name{
        display: none;
    }
}
@media print {
    #main, html, body {
        height: auto;
        color: #333;
        width: 1200px;
    }
    #finish_form{
        max-width: none;
        width: 95%;
        margin: 0 auto;
    }
    .rg_link{
        color: #333;
    }
    #finish_app_no{
        color: #333;
    }
    .section_header{
        color: #333;
    }
    #print_btn{
        color: #333;
    }
    #close_btn{
        color: #333;
    }
    #footer_rg{
        color: #333;
    }
    #footer_rg #footer_text_rg{
        color: #333;
    }
    #print_btn{
        border-color: #761c19;
    }
    #close_btn{
        border-color: #d43f3a;
    }
    #finish_std_form .r div span {
        display: table-cell;
        width: 49.5%;
        padding-left: 0;
    }
    #finish_std_form  .f_header_rg{
        width: 49.5% !important;
    }
    #finish_std_photo{
        position: absolute;
        right: 15px;
        top: 6px;
    }
    #classes_title {
        color: #333;
        font-size: 20px;
    }
    .color_bar{
        background: unset;
    }
    .col1{
        background: unset;
    }
    .col2{
        background: unset;
    }
    .col3{
        background: unset;
    }
    .rg_header{
        background-image: unset;
    }
    .RGS{
        background-color: unset;
    }
    .RGN{
        background-color: unset;
    }
    #footer{
        background-color: unset;
    }
    .logo_bar{
        background-color: unset !important;
    }
    .rg_finish_btn{
        background-color: unset;
    }
    #finish_std_photo{
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 200px;
        position: unset;
        top: 0;
    }
    .student .f_span{
        display: block !important;
        padding-left: 15px !important;
    }
}


#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%;	
	}
}