/*	＊＊＊＊＊＊＊＊＊＊	自訂開始	＊＊＊＊＊＊＊＊＊＊	*/
/*	＊＊＊＊＊＊＊＊＊＊	自訂開始	＊＊＊＊＊＊＊＊＊＊	*/
* {
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	/* Safari */
}

#header .title .subTitle {
	font-size: 17px;
}

body {
	/*max-width: 600px;*/
	padding:0 5px;
	background-color: #000;
	color: #EEE;
	font-size: 18px;
	font-family: Arial, Helvetica, Verdana;
	line-height: 22px;
	position: relative;
	-webkit-text-size-adjust: none;
	/* 防止 select 文字   to disable text selection highlighting  */
	-webkit-touch-callout: none;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-khtml-user-select: none;
	-o-user-select: none;
	user-select: none;

	margin: 0 auto;
	width: 100%;
	max-width: 600px;
}

.main {	
}

textarea { font-size: 17px;}


a {
	color: #66CCFF;
	border-bottom: 1px solid #035C9F;
	padding: 3px 3px 0px 5px;
	text-decoration: none; 
}
a:link, a:active, a:visited, a:hover {
	color: #66CCFF;
}

a:has(I) {
	border-bottom: 0;
}

select.styled {
    font-size: 18px;
    padding: 3px 2px 2px 2px;
    color: #00ccff;  /*  #FF6666; #DDDD88;*/
    background-color: #333;
}


.disp-inline { display:inline;}

.hide { display:none; }
.invisible { visibility:hidden;}


.emphasize {
	font-size: 25px; 
	color: #FF0000;	
}

a.more {
	float:right; 
	margin-right:20px;
	font-size:15px;
	font-weight:normal; 
}

.blockui-msg {
	line-height: 30px; 
	text-align:center; max-width:360px; 
	font-size:17px; 
	color:#ff9900; 
	background-color:#555;  border:1px solid #AAA;
}
	 
label[for].on { font-weight: bold; }

.B { font-weight: bold; }
.left { text-align: left; }
.right { text-align: right;}
.center { text-align: center; }
.L {text-align: left;}
.C {text-align: center;}
.R {text-align:right;}

.largerLess {font-weight: normal; }

.inline-block {display: inline-block;}

.ps { font-size: 16px; text-align: left;}
.small { font-size: 16px;}

.fl {float: left;}
.fr {float: right;}
.clear {clear:both;}

.mg-t5 {margin-top: 5px;} 
.mg-t15 {margin-top: 15px;} 
.mg-t20 {margin-top: 20px;}
.mg-t30 {margin-top: 30px;}
.mg-t50 {margin-top: 50px;}

.mg-right5 {margin-right: 5px;}
.mg-right10 {margin-right: 10px;}
.mg-right15 {margin-right: 15px;}
.mg-right20 {margin-right: 20px;}

.mg-left5 {margin-left: 5px;}
.mg-left10 {margin-left: 10px;}
.mg-left15 {margin-left: 15px;}
.mg-left20 {margin-left: 20px;}

.w20pcnt { width: 20%;}
.w30pcnt { width: 30%;}
.w50pcnt { width: 50%;}



input[type=text] {
	font-size:16px; line-height:23px; color: #111111;
}

button {
	font-size:16px; 
	/* height: 28px;  color: #ff6;
	padding: 5px 3px;
	*/
	color: #DDDD88;
	background-color: #333;
	border: 1px solid #aaa;	 
	-webkit-border-radius:5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor:pointer;
}

/* click button時, 不要出現外框  */
button:focus {outline: none;} 

button.outstanding {color: #FFD700;}


/* 項目切換, 改用link text */

.filterZone {
	text-align: center; 
	padding: 3px;
	margin: 10px 3px 10px 3px;
}
/*
.filterZone A[role="gpGQuoteId"] {
	color: #EEEEEE;
	font-size: 15px;
	border-bottom: 0;
	text-decoration:none; 
}

.filterZone A[role="gpGQuoteId"].on {
	color: #DAA520; 
	font-size: 18px;
	font-weight: bold;
}*/
.filterZone .tab {
	color: #EEEEEE;
	font-size: 16px;
	border-bottom: 0;
	text-decoration:none; 
}

.filterZone .tab.on {
	color: #00ccff;  /*  #DAA520 , #00ccff 改成變換字的顏色*/ /*background-color:#3388cc;*/  
	font-size: 18px;
	font-weight: bold;
}

/* more apps */
.more-app {font-size:17px; margin:5px 3px 15px 3px;}
.app-icon {float:left; margin:3px 7px 0px 3px;}
.app-title {display:block; margin-top: 3px; margin-bottom: 5px; color:#FFD700; font-size:22px; font-weight: bolder;}
.to-download {color:#FF5555; font-size: 18px;} 
 
label.error {display: none; color: red; font-weight: bold;}

/* color of  checked radio*/
label:has(input[type="radio"]:checked) {
	/*color: #FF6666;*/
	color: #00CCFF; 
}
  
.gotop {
	display: none; 
	cursor: pointer;
	position: fixed;
	z-index: 900;
	right: 8px;
	bottom: 70px;
	background-color: #333; 
	color: #DDDD88; /*FF6666 #ff6 */
	font-weight: bold; 
	border: 1px solid #f0f0f0;
	border-radius: 5px;
	padding: 8px 12px;
	opacity: 0.75;
}

.float-add {
	cursor: pointer;
	position: fixed;
	z-index: 900;
	left : 8px;
	bottom: 80px;
	color: #ffb3b3;
	background-color: #333; 
	font-size: 30px; 
	font-weight: bold; 
	border: 3px solid #ffb3b3;
	border-radius: 30px;
	padding: 8px 8px;
	opacity: 0.75;
}

.float-add .fa-plus {
	color: #ffb3b3;
}

.bottom-extend {
	height:80px;
}

.extender{
	height:50px;
}



/*  ----------  table  ---------- */

table.grid {width: 100%; padding: 0px; margin-bottom: 5px;}
table.grid td {padding-right: 2px;}
table.grid td.L {text-align: left;}
table.grid td.C {text-align: center;}
table.grid td.R {text-align: right;}


.w80 { width: 80px;}
.w85 {	width: 85px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }



/*	* *****		首頁		*****	*/
/*	* *****		首頁		*****	*/

.warnlist { margin-top: 5px; margin-bottom: 15px;}
.warnlist li { padding-top: 7px;}
.warnlist a  { color: #ff9900; font-size:21px; font-weight: bold; }  /*  color: #CC0066;*/

.last-donation-info { margin-top: 5px; margin-bottom: 10px;}
.last-donation-info .days-elapsed {font-size: 25px; font-weight:bold; color: #CC0033;}



.tblBorder {
	border: 1px solid #EEEEEE; 
	border-radius: 8px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	margin-top: 3px;
	margin-bottom: 5px; 
}
table.storage {
	width: 100%;
	font-size: 18px;
	padding: 0;
	border: 0;
	margin-top: 0px;
}

table.storage caption {
	color: #ffffff;
	/*border-bottom: 2px solid #FF9900;*/	
	font-weight: normal;
	padding-top: 3px;
	padding-bottom: 5px;	
}

table.storage th {
	height: 36px;
	padding: 0px;
	text-align: center;
	color: #ff9900;
	font-size:19px;
	border-bottom: 2px solid #ff9900;
	/*background-color: #E6E6E6;*/
	/*border-top: 1px solid #BBBBBB;*/
}

table.storage td {
	height: 45px;
	text-align: center;
	padding: 6px 2px 0 1px;
	border-bottom: solid 1px #666666;
}

table.storage tr.last td {
	border-bottom: 0;
}

table.storage img { 	width: 40px; height: 40px; }

/* 圖例 */
.ps img {width: 36px; height: 36px;}


/* -----------	help	----------- */
/* -----------	help	----------- */
.manual ul {
	font-size: 17px;
	margin: 5px 5px 0px -10px;
}

.manual ul li {	
	text-align: left;
	margin-top: 12px;
}






/* *****	活動 搜尋		*****	*/
/* *****	活動 搜尋		*****	*/
 
.listview {
	width: 100%;
	list-style-type: none;
}
.listview li {
	width: 100%;
	margin-left: 0px;
	margin-top: 6px;
	margin-bottom: 0px;
	padding: 3px 3px;
	border-bottom: 1px solid #444444;
}
	
.listview li.title.fold {
	background: url("../images/ico_expand.png") no-repeat scroll 3px 9px #555;
	border-bottom: 3px solid #222222;		/* 折疊時才顯示底線, 以便與下一個日期有區隔 */
}
	
.listview .group-title {
	/*display: block; 
	background-color: #3388cc;*/
	font-weight: bold;
	padding: 3px 0 3px 29px;
}
	
.listview .li-count {
	font-size: 17px;
	margin-left: 12px;
	min-width: 50px;
	border-radius: 3px;
	padding: 0px 3px;
	border: 1px solid #dddddd;
	background-color: #333333;
}
	
	
.listview li div {
	position: relative;		
	width: 100%;
	-moz-user-select: none;  
	cursor: pointer;
	margin: 1px 0;
	padding: 1px 0 3px 0;
	text-align: left;
	/* white-space: nowrap; 加這個價導致 span.addr無法換行 */
	border-bottom: solid 1px #CCCCCC;	
}
	
	 
.listview li div.shuttle {
	/*	*********	固定(巡迴)捐血點	
	background: #222222;
	*********	*/
}
	
.listview li div.fixed .spotType{
	color: #FF6666;
}
		
.listview li div.shuttle .spotType {
	/*	*********	固定(巡迴)捐血點	*********	*/	
	color: #33CCFF;
}
	
	
	

	
.listview li.last-one div {
	/*  暫取消 border-bottom: 0px;
	margin-bottom: 5px;
	*/
}	
	
/* li 內的 右側項目: 放 加入最愛, MAP等 */
.listview .li-aside {
	position: absolute;
	right: 5px;
	top: 1px;
	text-align: right;
	margin: 0;
}
	
/* icon 地圖 & 加最愛 */
.listview li img {
	width: 27px;
	height: 26px;
}
	 
	
	
/* 顯示listview 的 detail 向右箭頭icon
.listview li a::after {
	content: "";
	width: 22px;
	height: 22px;
	background-color: #556699;
	background-image: url(../images/ico-detail.png);
	background-repeat: no-repeat;
	position: absolute;
	right: 5px;
	top: 50%;
}
*/

.summary { 
	display:block; 
	margin: 13px 0 0px 0; 
	padding:4px; 
	border-bottom: 1px solid #023a64;
} 

.summary.topBorder { 
	border-top: 1px solid #DDDD88;
} 


.trashcan {
	color: #DDD;
	font-size: 20px;
}

/* icon trashcan*/
.clsWatchList .clsAlarm .trashcan {	
	float: right;
	margin-right: 5px;
	margin-top: 2px;
}

.listview span.block {
	font-size: 16px;
	text-align:left; 
	display: block;	
	margin-bottom: 0px; 
}

.listview span.block.remarks {
	font-size: 14px;
	color: #CCC;
}

.listview span.org {
	color: #ff9900;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 0px;
	/*display : inline-block;*/
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
	width : 100%;
}
	
.listview span.addr {
	font-size: 15px;
	display : inline-block;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
	width : 100%;
	/* 加上這幾個屬性, 讓span中 超出的文字部分, 變...
		display : inline-block;
		overflow : hidden;
		text-overflow : ellipsis;
		white-space : nowrap;
		width : 100px; 
	*/		
}

/*  活動時間 */
.listview span.calendar-open {
	/*color: #CCC;*/
	font-size: 15px;
	display : block;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
	width : 100%;
}
	
	
.listview span.sfont {
	font-size: 17px;
	display : inline-block;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
	width : 100%;
}
	 
/* 重點 icon */
.highlight_icon {
	color: #ffb3b3;
	/*font-weight:bold;*/
}


/* fa-heart */
.fa-heart {
	font-size: 22px;
	color: #ffb3b3;
}

.fa-heart.fa-solid { color: #FF0000; }

.bottom-navbar .fa-heart {
	font-size: 16px;
}
.mm-listitem .fa-heart {
	font-size: 19px;
}

/*	*********	捐血行事曆	*********	*/
/*	*********	捐血行事曆	*********	*/
/*	*********	捐血行事曆	*********	*/
/* 以下修改jquery-ui 日曆 的theme  */
		
.ui-datepicker {
	display: none;
	padding: 0.2em 0.2em 0;
	width: 60%;  /*ori=17em*/
}

/* 改外框  */
.ui-widget-content {
	background: #023a64;
	border: 2px solid #333333;  /*ori 1px  #666666*/
	color: #EEE;
}

		
/* 25.0524, 
.ui-widget-content .ui-state-default {
	background: #FF9966;
	border: 1px solid #666666;
	font-weight: bold;
			
}*/

/* 不能選的日期 */
.ui-widget-content .ui-state-disabled {
	background-image: none;
	opacity: 0.25;
}

		
		
/*被選的日期 color & bgColor */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	background: url("../images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #0078a3;
	border: 1px solid #ff6666;
	color: #ffffff;
	font-weight: bold;
}
		
		
/*  日曆文字置中*/
.ui-datepicker td span, .ui-datepicker td a {
	display: block;
	padding: 0.2em;
	text-align: center; /*ori = right*/
	text-decoration: none;
}
.ui-datepicker-header a {
	border-bottom: 0; 
}
/* 25.0524 取消這段, 不然calendar無法切換月份
	隱藏日曆的header , title 及　上／次月的button  
.ui-datepicker-header, .ui-widget-header {display:none; }
*/

.loading { text-align:center;}
/*	*****	以上	***********	*/




/* ***************************************** */

nav:not(.mm-menu) {
	display: none;
}

/*  below:  header		**************************************************/
/*  below:  header		**************************************************/
#header {
	position: sticky;
	height: 50px;
	padding: 0 50px;
	top: 0;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	line-height: 44px;
	text-align: center;
	/*
	background: #EEEEEE; 
	background: #007EC8;
	background: #035C9F;
	*/
	background: #023a64; 
	z-index:2;
}

#header a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 50px;
	padding: 15px 25px;
}

#header a:before,
#header a:after {
	content: "";
	display: block;
	background: #fff;
	height: 2px;
}

#header a span {
	background: #fff;
	display: block;
	height: 2px;
	margin: 7px 0;
}

/* refresh data */
#header i.refresh {
	display: block;
	position: absolute;
	top: 5px;
	right: 0;
	font-size: 26px;
	padding: 10px 10px;
}

/* 表頭 clear watchlist */
#header i.trashcan {
	display: block;
	position: absolute;
	top: 5px;
	right: 40px;
	font-size: 26px;
	padding: 10px 10px;
}


/* header title 文字*/
#header .title {
	padding-top: 5px;
}

/*  above: header **************************************************/




/* below : mod mmenu nav */
.mm-navbar {
	color: #007EC8;
	font-weight: bold;
}

.mm-menu--theme-light {
	--mm-color-text: #EEE;
	--mm-color-background: #333;
	--mm-color-border: #555;
	--mm-color-focusring: #06c;
}

.mm-navbar__title span{
	color:  #ffffcc;
}

:root{--mm-size:70%;
	--mm-min-size:180px;
	--mm-max-size:300px;
}

/* above : mod mmenu nav */




/*below: bottom navbar  */
.bottom-navbar {
	z-index:3;
	position: fixed;
	/*left: 0;*/
	bottom: 0;
	overflow: hidden;
	background-color: #222;
	width: 100%;
	max-width: 600px;
	padding: 3px 10px;
	border-top:1px solid #AAA;

}

.bottom-navbar a {
	float: left;
	display: block;
	width: 25%;
	color: #f2f2f2;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	border-bottom: 0px;
	padding: 5px 0px;
}

.bottom-navbar a.on {
	color: #00ccff;
	border-bottom: 2px solid #00ccff;
}

.bottom-navbar a:hover {
	background: #f1f1f1;
	color: black;
}

.bottom-navbar a.active {
	background-color: #FF666D;
	color: white;
}
 
/*above: bottom navbar  */



/* below: mod sweetAlert */
.swal2-show {
    background-color: #333;
    color: #EEE;
}
 .swal2-show span.org {
	color: #ff9900;
	font-size: 18px;
	font-weight: bold; 
}
.swal2-show span.addr {
	font-size: 16px;
	display : inline-block;
	text-align:left; 
	width:100%;
	margin-bottom: 10px; 
}
.swal2-show span.calendar-open {
	font-size: 16px;
	display : inline-block;
	text-align:left; 
	width:100%;
	margin-bottom: 10px; 
}

div:where(.swal2-container).swal2-center {
	max-width: 600px; 
}

/* font color for input text of a swal dialog */
#swal2-input {
	color: #FFF; 
}

h2.swal2-title {
	font-size: 21px;
	color: #FFFFCC;
}

.swal2-html-container ul li {
	text-align: left;
	font-size: 16px;
}

*[role="contextMenuMap"] img {
	width: 26px;
	height: 26px;
}

A[role="contextMenuHeart"] {
	color: #ffb3b3;
}


.siteDesc li {
	margin-bottom: 8px; 
}