/* chinese font */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/* english font */
@import url('https://rsms.me/inter/inter-ui.css');
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, a,li,td,th,div{
    font-family: "Microsoft JhengHei",Inter UI","Open Sans", Helvetica, Arial, 'Noto Sans TC',"Material Design Icons" ,sans-serif !important;
}
img
{
    max-width: 100% !important;
}
.classes-name
{
    display: inline-block !important;
    width: 70px;
    color: #f36700;
    font-size: 16px;
    font-weight: 700;
}
.classes-name-2
{
    display: inline-block !important;
}
.colourLinks a{
    color: #f8c300;
}
.font-orange
{
    color: #f8c300 !important;
}
.fullWidth
{
    width:100% !important;
}
.justifyContentLeft
{
    justify-content: left !important; 
}
.alignCenter
{
    text-align: center !important; 
}
.no-margin-bottom
{
    margin-bottom: 0 !important;
}
.no-margin-top
{
    margin-top: 0 !important;
}
.no-padding
{
    padding: 0 !important;
}
.no-padding-w
{
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.padding-w-50
{
    padding-left: 50px !important;
    padding-right: 50px !important;
}
.margin-bottom-30
{
    margin-bottom: 30px !important;
}
.margin-bottom-90
{
    margin-bottom: 90px !important;
}
.margin-top-5
{
    margin-top: 5px !important;
}
.text-color-black
{
    color: #000 !important;
}
@media(max-width: 767px){
    .xs-fullWidth
    {
        width: 100% !important;
    }
}
.small-text
{
    color: #888888 !important;
    font-size: 12px !important;
    font-weight: normal !important;
}
.font-12
{
    font-size: 12px !important;
}
.header-lang
{
    height: 42px;
    line-height: 42px;
}
.page-footer .footer-copyright
{
    text-align: center;
    font-size: 12px;
}
.customTable, .assignmentsTable, .customTable-vertical
{
    border: 1px solid #e5e5e5;
}
.customTable th, .assignmentsTable th
{
    text-align: center;
    border-right: 1px solid white !important;
}
.customTable-vertical th, .customTable-vertical td
{
    text-align: center;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* general info school app user manual download icon */
p.dlBtn{
    display: flex;
    align-items: center;
    justify-content: center;
}
.customTable td, .assignmentsTable td
{
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-right: 1px solid white !important;
}
.customTable th:first-child, .customTable-vertical th:first-child
{
    width: 30% !important;
}
.customTable td:first-child, .customTable-vertical td:first-child
{
    text-align: center;
}
.customTable th:last-child, .customTable-vertical th:last-child
{
    border-right: 1px solid #e5e5e5 !important; 
}
.customTable td:last-child, .customTable-vertical td:last-child
{
    border-right: 1px solid #e5e5e5 !important; 
}
.customTable-vertical tbody tr:first-child
{
    border: 1px solid #e5e5e5 !important;
}
.customTable-vertical tr:first-child td
{
    font-weight: normal !important;
}
.customTable-no-head tr:nth-child(2)
{
    border: 1px solid #e5e5e5 !important; 
}
.customTable-with-grey-border tr,.customTable-with-grey-border td
{
    border: 1px solid #e5e5e5 !important; 
}
.customTable-no-1st-row th:first-child
{
    width:auto !important;
}
.customTable-hidden-title .st-key
{
    display: none;
}
.customTable-hidden-title .st-val
{
    width: 100% !important;
}
.ecaTable td
{
    border: 1px solid #e5e5e5 !important; 
}
/* admission page primary one application */
table#prOneApplication td{
    padding-left:0.5rem;
}
.table-custom.table-fixed th:nth-child(n+2)
{
    padding-left: 23px !important;
}
.table-custom.table-fixed td:nth-child(n+2)
{
    padding-left: 23px !important;
}
/* admission page fixed term note programme mr desmond lai contact */
div#ctDtl h4{
    font-size: 1.5rem;
}
div#ctDtl .ctMthd b{
    display:inline-block;
    width:7rem;
}
/* general info timetable */
table.timeTable{
    text-transform: uppercase;
}
table.timeTable th:first-child{
    width: auto !important;
}
table.timeTable td{
    text-align: center !important;
}
.classTimeTable img{
    width: 100%;
}
#contactTab>div>div>div
{
    display: inline-block;
}
#contactTab>div>div>div:first-child
{
    width:30%;
}
.responsive-tabs[data-type="horizontal"] ul, .responsive-tabs-2[data-type="horizontal"] ul, .responsive-tabs-3[data-type="horizontal"] ul
{
    max-width: unset !important;
}
.responsive-tabs[data-type="horizontal"] ul:after, .responsive-tabs-2[data-type="horizontal"] ul:after, .responsive-tabs-3[data-type="horizontal"] ul:after
{
    background: none !important;
}
.responsive-tabs[data-type="horizontal"] li, .responsive-tabs-2[data-type="horizontal"] li, .responsive-tabs-3[data-type="horizontal"] li
{
    display: inline-block !important;
}
.swiper-slide-caption
{
    text-align: left;
}
.post-event
{
    max-width: none !important;
}
.post-event .unit
{
    background-color: white;
    margin-top: 0px !important;
}
.post-event .unit .unit-body
{
    padding: 20px;
}
.photoAlbumStyle .post-event .unit
{
    background-color: #F5F7FA;
}
@media (min-width: 1200px){
    .post-event .unit .unit-body
    {
        padding-top:0px !important; 
        padding-bottom:0px !important;
        padding-right: 20px;
    }
    .post-event .unit .unit-body div
    {
        padding-top: 0px !important;
    }
    .post-event .unit .unit-body div
    {
      height:68px;
      font-size:0;
    }
    .post-event .unit .unit-body div:before
    {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 0;
      height: 100%;
    }
    .post-event .unit .unit-body div h6{
      display: inline-block;
      font-size:16px;
      vertical-align: middle;
    }
}
/* general info bus routes table */
.table-custom.table-primary tbody tr:nth-child(2) {
    
}
.customTable-notitle tbody tr:nth-child(2) 
{
    border-top-style: solid !important;
    border-top-color: #e5e5e5 !important;
    border-top-width: 1px !important;
}
.table-center-border
{
    text-align: center;
    border: 1px solid #e5e5e5;
}
.table-center-border th
{
    text-align: center;
}
@media (max-width: 991px) {
    .breadcrumb-classic
    {
        margin-top: 50px !important;
    }
}
@media (min-width: 1200px) {
    .responsive-tabs[data-type="vertical"] .resp-tabs-container 
    {
        max-width: 100% !important;
    }
}
@media (min-width: 992px) {
    .responsive-tabs-boxed[data-type="horizontal"] .resp-tabs-list li.resp-tab-active, .responsive-tabs-boxed[data-type="horizontal"] .resp-tabs-list li:hover, .responsive-tabs-boxed[data-type="vertical"] .resp-tabs-list li.resp-tab-active, .responsive-tabs-boxed[data-type="vertical"] .resp-tabs-list li:hover
    {
        background: white !important;
        color: #f36700 !important;
        border-color: #f36700 !important;
    }
    .tab-level-2 li:after, .tab-level-2 li:hover:after
    {
        width: 0 !important;
    }
    .responsive-tabs-boxed[data-type="horizontal"] .resp-tabs-list li, .responsive-tabs-boxed[data-type="vertical"] .resp-tabs-list li
    {
        color: #e5e5e5 !important;
        border-color: #e5e5e5 !important;
    }
}
.rd-navbar-dropdown
{
    width: 280px !important;
    overflow-y: unset !important;
}
.xs-show{
    display:none;
}
.xs-hide{
    display:block;
}
/* xs-show and xs-hide */
@media (max-width: 767px) {
    .xs-show{
        display:block;
    }
    .xs-hide{
        display:none;
    }
}
#contactPage .responsive-tabs .resp-accordion
{
    color:#000000 !important;
}
#contactPage .responsive-tabs .resp-accordion:hover
{
    color:#f8c300 !important;
}
.breadcrumb-classic .list-inline-dashed > li:last-child
{
    color:#fff !important;
}
#schoolnews .post-event-body h6
{
    font-size:14px !important;
}
#schoolnews .post-event-body h6 a 
{
    color:#000000 !important;
}
#schoolnews .post-event-body h6 a:hover
{
    color: #f8c300 !important;
}
#home-video-left
{
    text-align:left;
    padding: 50px;
}
#home-video-right
{
    text-align:left;
    padding: 50px;
}
#home-video div
{
    width:50%; 
    display: inline-block; 
    vertical-align: middle;
}
.responsive-tabs-classic[data-type="vertical"] .resp-tabs-list
{
    text-align: left !important;
}


.photo_album_cover{
    object-fit: cover;
    height: 250px;
}