/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Roboto:lighter,normal,medium,bold);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700);

/* --------------------------------------
font family related 
-------------------------------------- */
body, p, li, div, span, input, h1, h2, h3, h4, h5, h6, a, td, th, label { font-family:'Roboto', Helvetica, Arial, sans-serif, "Heiti TC", "LiHei Pro", "Noto Sans", "Microsoft JhengHei", "微軟正黑體", "Noto Sans TC", "Apple Color Emoji", "Noto Color Emoji"; !important; }

[class^="icon-"],
[class*=" icon-"],
[class^="icon-line-"],
[class*=" icon-line-"],
[class^="icon-line2-"],
[class*=" icon-line2-"],
.side-header .primary-menu ul > li.sub-menu > a:after,
.docs-navigation ul ul li.current a:after {
	font-family: "font-icons" !important;
}

[class^="icon-line-"],
[class*=" icon-line-"] {
	font-family: "lined-icons" !important;
}

[class^="icon-line2-"],
[class*=" icon-line2-"] {
	font-family: "Simple-Line-Icons" !important;
}

/* --------------------------------------
framework related 
-------------------------------------- */
.webheader-wrap {
	position:relative;
}
.webheader { 	
	position:relative;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	z-index: 5; background-color:#fff;
}
.loggedin .webheader-holder{
	/* top: 51px; */
	border-bottom:1px #38728a solid !important;
}
.webheader .webheader-holder {
	height:8rem !important;
}
@media (min-width: 992px) {
	.webheader.loggedin { top:0px; }
	.webheader .webheader-holder { height:7rem !important; }
}
.landingBgWrap.min-vh-100 {     min-height: calc( 100vh - 8rem) !important; }
.landingBg { background-image: url('../img/bg-landing-clear.png');background-position: 50% 0; padding-top:1.5rem; }
.webContentWrap { padding-top:0.5rem; }
@media (min-width: 992px) {
	.landingBgWrap.min-vh-100 {     min-height: calc( 100vh - 7rem) !important; }
	.landingBg {  padding-top:0rem; }
	.webContentWrap { padding-top:0.5rem; }
	.side-header.open-header #header-trigger { font-size: 2rem; }
}



.headerLogo img { height:1.5rem; margin-right:0.75rem; }
.headerLogo.text-end img { margin-left:1rem; margin-right:0rem; }
.headerMainLogo img { height:3.5rem; }
.qr-item { height:3rem; margin-right:1rem; }
.headerMainLogo { margin-top: 0.8rem; }
.headerLogo { margin-top: 1rem; }
.headerControl { margin-top: 1rem; }
.headerLogo span { display:none !important; }
@media (min-width: 992px) {
	.headerLogo img { height:2.5rem; }
	.headerMainLogo img { height:5rem; }
	.qr-item { height:3rem; }
	.headerMainLogo { margin-top: 1rem; }
	.headerLogo { margin-top: 1.5rem; }
	.headerControl { margin-top: 2.3rem; }
	.headerLogo span { display:inline-block !important; }
}
@media (min-width: 1200px) {
	.headerLogo img { height:3rem; }
}

.contactLogoPsgo { height:5rem; }

#header-wrap { background: #c3d5dc; border-top:none; }
@media (min-width: 992px) {
	#header-wrap { border-top:3rem solid #c3d5dc; }
	.side-header #header-wrap > .container {
		padding: 0px !important;
	}
	.side-header .menu-item,
	.side-header .menu-item:not(:first-child) { padding:0px; margin:0px; }
	.side-header .menu-item a { padding: 15px 30px !important; }
	
}
.menu-item > .menu-link { color:#38728a; padding-left:5px !important; }
.menu-item:hover > .menu-link, .menu-item.current > .menu-link, .side-header .menu-item:hover > .menu-link { color:#fff; background-color:#38728a !important; }



.form-group {
    margin-bottom: 1rem;
}

.programFormWrap .form-group { margin-top:0.5rem; margin-bottom:2rem; }
.programFormTitle { color:#38728a; margin-bottom:0px; }
.programFormSubTitle { color: inherit; font-weight:normal; margin-bottom:0px; }
.programFormSep { border-top:2px #38728a solid; height:1px; margin-bottom:2rem; }


.landingForm { background-color: rgba(255,255,255,0.4); }


/* --------------------------------------
font size related 
-------------------------------------- */
.form-control,
label,
.button {
	font-size: inherit;
}

.pageFontSizeS h1 { font-size: 28px; }
.pageFontSizeL h1 { font-size: 48px; }
.pageFontSizeS h4 { font-size: 14px; }
.pageFontSizeL h4 { font-size: 22px; }

.pageFontSize { display:inline-block; margin-right:1rem; }
.pageFontSize a { color: #000 !important; }
.pageFontSizeS { font-size:0.75rem; }
.pageFontSizeM { font-size:1rem; }
.pageFontSizeL { font-size:1.3rem; }
.pageControlLang { display:inline-block; }
.pageControlLang a { color: #000 !important; }
.pageFontSize a.pageFontSizeCur,
.pageFontSize a:hover,
.pageControlLang a:hover { color:#38728a !important; }

.infoTableHead { font-size:0.9rem; color:#999; }
.infoTableCalHead { color:#fff; }
.infoTableCalHead.pdcpBlue { background-color:#38728a; color:#fff !important;}
.infoTableCalHead.pdcpBrown { background-color:#816542; color:#fff !important;}


/* --------------------------------------
style related 
-------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem 0;
		color:inherit;
		font-weight:normal; 
}
p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form { margin-bottom:0.5rem; }
.loginInfo {
	margin-bottom:0.5rem;
}
#calendar table { margin-bottom:0 !important; }

label { text-transform: none; }

.button { margin-left: 0px !important; }
.button-border.button-pdcpblue {
	color: #38728a;
	border-color: #38728a;
}
.button-3d.button-pdcpblue:hover, .button-reveal.button-pdcpblue:hover, .button-border.button-pdcpblue:hover, .button-border.button-pdcpblue.button-fill::before {
	background-color: #38728a !important;
}

.button-border.button-pdcpbrown {
	color: #816542;
	border-color: #816542;
}
.button-3d.button-pdcpbrown:hover, .button-reveal.button-pdcpbrown:hover, .button-border.button-pdcpbrown:hover, .button-border.button-pdcpbrown.button-fill::before {
	background-color: #816542 !important;
}

.form-control {
	color: #212529;
	background: none;
	border: none;
	border-bottom: 1px #38728a solid;
}
.form-control:focus {
	background: none;
}
.select2-container--default .select2-selection--single {
	border: none;
	border-bottom: 1px #38728a solid;
	
}

.landingBg .form-control { padding-left:0 !important; } 

.infoTable > tbody > tr > td { border-color:#ddd; }
.infoTable > tbody > tr:last-child > td { border-bottom:none !important; }
.infoTable { border-bottom:none !important; }
.infoTable-2col td { width:50% }
.infoTableModule td:first-child,
.infoTableMyAccount td:first-child { width:20% }

.pdcpBlue, a { color:#38728a; }
.pdcpBrown { color:#816542; }
a:hover { color:#000; }
.moduleOneBox a, .moduleTwoBox a { color:inherit; display:block; }
.moduleOneBox a:hover, .moduleTwoBox a:hover { color:#000; }

.shortSeparatorBlue { height:1px; border-bottom:2px #38728a solid; width:100px; margin-bottom:0.5rem; }
.shortSeparatorBrown { height:1px; border-bottom:2px #816542 solid; width:100px; margin-bottom:0.5rem; }

.moduleOneBox { background-color:#d7e3e8; color:#38728a; padding:0.5rem; }
.moduleTwoBox { background-color:#e6e0d9; color:#816542; padding:0.5rem; }

.toggle-bg .toggle-header { background-color:#b9ced6; color:#fff; }
.toggle-active .toggle-header { background-color:#38728a; color:#fff; }

.moduleTwoListItemWrap { border-top:1px #816542 solid; padding-top:0.5rem; }
.moduleTwoListItemWrap a { 	font-size: 0.75rem; }

.moduleTwoListStatus { text-align:center; color:#fff; font-size:1.3rem; margin-top:0.5rem; padding:0.5rem; }
.moduleTwoListStatusExpire { background-color: #ccc; }
.moduleTwoListStatusAvailableSoon { background-color: #d7e3e8; }
.moduleTwoListStatusAvailableEnroll { background-color: #e6e0d9; }
.moduleTwoListStatusEnrolled { background-color: #816542; }
.moduleTwoListStatusCompleted { background-color: #38728a; }

.moduleTwoDetailItemWrap .moduleTwoDetailItemSep { border-top:1px #816542 solid; height:1px; margin-bottom:0.5rem; }
.moduleTwoDetailItemWrap h3 { padding-left:0.5rem; }

.moduleTwoDetailEnrolled { display:inline-block; vertical-align:top; margin-right:0.5rem; color:#816542 }
.moduleTwoDetailDeadline { background-color:#816542 !important; color: #fff; }

.iconContact i { top:2px !important; }

.col-form-label .errMsg { display:none; }

.landingBg h4 { color:#fff; }
.landingBg .pdcpBlue { color:#006; }


.kv-error-close { display:none; }


/* --------------------------------------
calendar hack
-------------------------------------- */
.fc .fc-toolbar-title { font-size: inherit; color:inherit; }
.calCustomBlock { width:1rem; height:1rem; display:inline-block;}
.calCustomColor1 { background-color:#38728a !important; }
.calCustomColor2a { background-color:#d1b592 !important; }
.calCustomColor2b { background-color:#816542 !important; }
.fc-col-header-cell { background-color:#38728a; }
.fc-col-header-cell a, .fc-col-header-cell a:hover { color:#fff; }
	
:root {
--fc-button-text-color: #38728a;
--fc-button-bg-color: #fff;
--fc-button-border-color: #d7e3e8;
--fc-button-hover-bg-color: #d7e3e8;
--fc-button-hover-border-color: #d7e3e8;
}

#logobrand img { width:115px; mar }
/*
.section { background-color:transparent; }

h2, h3, h4, h5 { color:#67B8E8; }
.hka-light-blue { color:#67B8E8; }
.hka-dark-blue { color:#2d3969; }
.hka-dark-blue-btn { background-color: #2d3969; }
.hka-dark-blue-btn:hover { background-color: #3d4979; }

#header-wrap { border-top: 20px solid #2d3969; }

.mainLogo { height:80px !important; }

.full-header #logo, .full-header .primary-menu .menu-container { border-right: none; }

.menu-link { text-transform: none; }

.normal-list { padding-left:1rem; }


.errMsg { color: #f33; }

.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 45px; }
.select2-container .select2-selection--single, .select2-container .select2-selection--multiple { min-height: 45px; }
.select2-container .select2-search--inline .select2-search__field { margin-top:10px; }
.select2-container { max-width:100%; }
.is-invalid .select2-selection {
    border-color:#dc3545 !important;
}
*/