/*//////////// font style ///////////////*/
.fontStyleA{
    font-size: 64px;
    font-family: 'Helvetica Neue Medium';
}
.fontStyleB{
    font-size: 50px;
    font-family: 'Helvetica Neue Medium';
}
.fontStyleC{
    font-size: 32px;
    font-family: 'Helvetica Neue Medium';
}
.fontStyleD1{
    font-size: 18px;
    font-family: 'Helvetica Neue Bold';
}
.fontStyleD2{
    font-size: 18px;
    font-family: 'Helvetica Neue Roman';
}
.fontStyleE1{
    font-size: 16px;/*18px;*/
    font-family: 'Helvetica Neue Roman';
}
.fontStyleE2{
    font-size: 16px;/*18px;*/
    font-family: 'Helvetica Neue Bold';
}
.fontStyleF1{
    font-size: 14px;/*15px;*/
    font-family: 'Helvetica Neue Roman';
}
.fontStyleF2{
    font-size: 14px;/*15px;*/
    font-family: 'Helvetica Neue Bold';
}
/*//////////// background color /////////////*/
.WhiteColor-bg{
    background-color: #ffffff;
    color: #000000;
}
.GreenThemeColor-bg{
    background-color: #00d7be;
    color: #000000;
}
.GreyThemeColor-bg{
    background-color: #bcbcbc;
    color: #000000;
}
.YellowThemeColor-bg{
    background-color: #ffdc00;
    color: #000000;
}
.OrangeThemeColor-bg{
    background-color: #00d7be;
    color: #000000;
}
.BlueThemeColor-bg{
    background-color: #5a9eff;
    color: #000000;
}
.LightGreyThemeColor-bg{
    background-color: #ececec;
    color: #000000;
}
.BlackThemeColor-bg {
    background-color: #000000;
    color: #ffffff;
}
.WhiteThemeColor-bg{
    background-color: #ffffff;
    color: #000000;
}
/*//////////// text color /////////////*/
.BlackThemeColor-text{
    color: #000000;
}
.WhiteThemeColor-text{
    color: #ffffff;
}
/*//////////// theme button ////////////*/
.FuncButton {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.FuncButton:before {
    /*display: inline-block;
    font-family: FontAwesome;
    font-size: 3.2rem;
    line-height: 1;
    text-align: left;
    margin-top: 4px;
    margin-left: 15px;*/
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 100%;
    display: inline-block;
    color: #ffffff;
    width: 40px;
    height: 40px;
    padding: 0px;
    text-align: center;  
}
.FuncButton.ButtonNext:before {
    background-image: url(../images/arrow_right_w.svg);
}
.FuncButton:focus, .FuncButton:hover{
    background-color: #00d7be;
    color: #ffffff;
    background-image: url(../images/arrow_right.svg);
}
/*//////////// End of theme button ////////////*/
/*//////////// MegaMenu ////////////*/
#megamenu .btnMenuLink{
    position: relative;
    display: inline-block;
    color: #000000;
    width: 100%;
}
#megamenu .btnMenuLink span.arrow{
    position: absolute;
    padding: 1px 0px 3px 0px;
}
#megamenu .btnMenuLink span.arrow:before{
    position: relative;
    top: 1px;
    left: 0px;
    content: "";
    background-image: url(../images/arrow_right.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    width: 25px;
    height: 25px;
    padding: 0px;
    text-align: center;
    z-index: 10;
    box-sizing: content-box;    
}
#megamenu .btnMenuLink span.title{
    padding-left: 30px;
}
#megamenu .MenuGroup-tab:hover .first-level-menu-header, #megamenu .MenuGroup-tab:focus .first-level-menu-header,
#megamenu .MenuGroup-tab:hover .first-level-menu-holder, #megamenu .MenuGroup-tab:focus .first-level-menu-holder{
    background-color: #000000;
}
#megamenu .MenuGroup-tab:hover .first-level-menu-holder .btnMenuLink, #megamenu .MenuGroup-tab:focus .first-level-menu-holder .btnMenuLink{
    color: #ffffff;
}
#megamenu .MenuGroup-tab .first-level-menu-holder .btnMenuLink span.arrow:before{
    background-image: url(../images/arrow_right.svg);
}
#megamenu .MenuGroup-tab:hover .first-level-menu-holder .btnMenuLink span.arrow:before,
#megamenu .MenuGroup-tab:focus .first-level-menu-holder .btnMenuLink span.arrow:before{
    background-image: url(../images/arrow_right_w.svg);
}
/*//// Megamenu About HKUMed /////*/
#megamenu #MenuGroup_About-HKUMed:hover, 
#megamenu #MenuGroup_About-HKUMed:focus{
    background-color: #00d7be;
}
#megamenu #MenuGroup_About-HKUMed:hover .first-level-menu-holder .btnMenuLink:hover, 
#megamenu #MenuGroup_About-HKUMed:focus .first-level-menu-holder .btnMenuLink:focus{
    color: #00d7be;
}
#megamenu #MenuGroup_About-HKUMed:hover .first-level-menu-holder .btnMenuLink:hover span.arrow:before, 
#megamenu #MenuGroup_About-HKUMed:focus .first-level-menu-holder .btnMenuLink:focus span.arrow:before{
    background-image: url(../images/arrow_right_green.svg);
}
.AboutHKUMedTheme .btn-features:before{
    background-image: url(../images/arrow_right_green.svg);
}
/*//// Megamenu Schools & Departments /////*/
#megamenu #MenuGroup_School-Department:hover, 
#megamenu #MenuGroup_School-Department:focus{
    background-color: #00d7be;
}
#megamenu #MenuGroup_School-Department:hover .first-level-menu-holder .btnMenuLink:hover, 
#megamenu #MenuGroup_School-Department:focus .first-level-menu-holder .btnMenuLink:focus{
    color: #00d7be;
}
#megamenu #MenuGroup_School-Department:hover .first-level-menu-holder .btnMenuLink:hover span.arrow:before, 
#megamenu #MenuGroup_School-Department:focus .first-level-menu-holder .btnMenuLink:focus span.arrow:before{
    background-image: url(../images/arrow_right_green.svg);
}
.SchoolDepartmentsTheme .btn-features:before{
    background-image: url(../images/arrow_right_green.svg);
}
/*//// Programmes & Admissions /////*/
#megamenu #MenuGroup_Programmes-Admissions:hover, 
#megamenu #MenuGroup_Programmes-Admissions:focus{
    background-color: #00d7be;
}
#megamenu #MenuGroup_Programmes-Admissions:hover .first-level-menu-holder .btnMenuLink:hover, 
#megamenu #MenuGroup_Programmes-Admissions:focus .first-level-menu-holder .btnMenuLink:focus{
    color: #00d7be;
}
#megamenu #MenuGroup_Programmes-Admissions:hover .first-level-menu-holder .btnMenuLink:hover span.arrow:before, 
#megamenu #MenuGroup_Programmes-Admissions:focus .first-level-menu-holder .btnMenuLink:focus span.arrow:before{
    background-image: url(../images/arrow_right_green.svg);
}
.ProgrammesAdmissionTheme .btn-features:before{
    background-image: url(../images/arrow_right_green.svg);
}
/*//// Research /////*/
#megamenu #MenuGroup_Research:hover, 
#megamenu #MenuGroup_Research:focus{
    background-color: #00d7be;
}
#megamenu #MenuGroup_Research:hover .first-level-menu-holder .btnMenuLink:hover, 
#megamenu #MenuGroup_Research:focus .first-level-menu-holder .btnMenuLink:focus{
    color: #00d7be;
}
#megamenu #MenuGroup_Research:hover .first-level-menu-holder .btnMenuLink:hover span.arrow:before, 
#megamenu #MenuGroup_Research:focus .first-level-menu-holder .btnMenuLink:focus span.arrow:before{
    background-image: url(../images/arrow_right_green.svg);
}
.ResearchTheme .btn-features:before{
    background-image: url(../images/arrow_right_green.svg);
}
/*//// HKU Health system /////*/
#megamenu #MenuGroup_HKU-Health-System:hover, 
#megamenu #MenuGroup_HKU-Health-System:focus{
    background-color: #00d7be;
}
#megamenu #MenuGroup_HKU-Health-System:hover .first-level-menu-holder .btnMenuLink:hover, 
#megamenu #MenuGroup_HKU-Health-System:focus .first-level-menu-holder .btnMenuLink:focus{
    color: #00d7be;
}
#megamenu #MenuGroup_HKU-Health-System:hover .first-level-menu-holder .btnMenuLink:hover span.arrow:before, 
#megamenu #MenuGroup_HKU-Health-System:focus .first-level-menu-holder .btnMenuLink:focus span.arrow:before{
    background-image: url(../images/arrow_right_green.svg);
}
.HKUHealthSystemTheme .btn-features:before{
    background-image: url(../images/arrow_right_green.svg);
}

#megamenu .first-level-child .btnMenuLink{
    font-size: 1.5rem;
}
#megamenu .first-level-child .btnMenuLink > *{
    vertical-align: middle;
    padding: 3px 20px 3px 0px;
    display: inline-block;
    box-sizing: border-box;
}
#megamenu .first-level-child .btnMenuLink > span.title{
    vertical-align: top;
}
#megamenu .first-level-child .btnMenuLink > span.title{
    width: 100%;
    vertical-align: top;
    padding-right: 0px;
}
#megamenu .second-level-child .btnMenuLink{
    padding: 7px 10px 5px 15px;
    box-sizing: border-box;    
}
#megamenu .second-level-child .btnMenuLink > *{
    vertical-align: middle;
    padding: 3px 0px 3px 0px;
    display: inline-block;
    box-sizing: border-box;
}
#megamenu .second-level-child .btnMenuLink > span.arrow, #megamenu .second-level-child .btnMenuLink > span.title{
    padding-top: 5px;
}
#megamenu .second-level-child .btnMenuLink{
    padding-right: calc((100vw - 1280px)/2);
}
#megamenu .second-level-child .btnMenuLink:hover, #megamenu .second-level-child .btnMenuLink:focus{
    color: #ffffff;
    background-color: #000000;
}
#megamenu .second-level-child .btnMenuLink:hover span.arrow:before, #megamenu .second-level-child .btnMenuLink:focus span.arrow:before{
    background-image: url(../images/arrow_right_w.svg);
}
/*//////////// End of MegaMenu ////////////*/

/*//////////// page theme color ///////////*/
.InnerPage .btn-features:hover, .InnerPage .btn-features:focus{
    /*color: #a2a2a2;*/
    text-decoration: underline;
}
.ProgrammesAdmissionTheme .section-title-holder{
    background-color: #00d7be;
}
.ProgrammesAdmissionTheme .accordion-tab.active .accordion-tab-btn:before,
.ProgrammesAdmissionTheme .accordion-tab:hover .accordion-tab-btn:before,
.ProgrammesAdmissionTheme .accordion-tab:focus .accordion-tab-btn:before{
    background-color: #00d7be;
}
.ProgrammesAdmissionTheme .btn-features{
    color: #00d7be;
}
.ResearchTheme .section-title-holder{
    background-color: #00d7be;
}
.ResearchTheme .accordion-tab.active .accordion-tab-btn:before,
.ResearchTheme .accordion-tab:hover .accordion-tab-btn:before,
.ResearchTheme .accordion-tab:focus .accordion-tab-btn:before{
    background-color: #00d7be;
}
.ResearchTheme .btn-features{
    color: #00d7be;
}
.AboutHKUMedTheme .section-title-holder{
    background-color: #00d7be;
}
.AboutHKUMedTheme .accordion-tab.active .accordion-tab-btn:before,
.AboutHKUMedTheme .accordion-tab:hover .accordion-tab-btn:before,
.AboutHKUMedTheme .accordion-tab:focus .accordion-tab-btn:before{
    background-color: #00d7be;
}
.AboutHKUMedTheme #Milestone-box .flex-item .year{
    color: #00d7be;
    font-weight: 100;
}
.AboutHKUMedTheme .btn-features{
    color: #00d7be;
}
.SchoolDepartmentsTheme .section-title-holder{
    background-color: #00d7be;
}
.SchoolDepartmentsTheme .accordion-tab.active .accordion-tab-btn:before,
.SchoolDepartmentsTheme .accordion-tab:hover .accordion-tab-btn:before,
.SchoolDepartmentsTheme .accordion-tab:focus .accordion-tab-btn:before{
    background-color: #00d7be;
}
.SchoolDepartmentsTheme .btn-features{
    color: #00d7be;
}
.HKUHealthSystemTheme .section-title-holder{
    background-color: #00d7be;
}
.HKUHealthSystemTheme .accordion-tab.active .accordion-tab-btn:before,
.HKUHealthSystemTheme .accordion-tab:hover .accordion-tab-btn:before,
.HKUHealthSystemTheme .accordion-tab:focus .accordion-tab-btn:before{
    background-color: #00d7be;
}
.HKUHealthSystemTheme .btn-features{
    color: #00d7be;
}