html,
body {
	font-size: 100%;
}

/* overriding rules defined in bootstrap stylesheet START */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 0;
}
/* overriding rules defined in bootstrap stylesheet END */

.llis {
	font-size: 16px;
	font-family: Arial, 'Microsoft JhengHei', sans-serif;
	color: #333;
}

.llis .ol-attribution.ol-uncollapsible {
	bottom: 0.5em;
	background-color: transparent;
}
.llis .ol-attribution img {
	display: none;
}
.llis .ol-attribution li {
	margin: 0;
}

.llis .ol-control-lightning-legend {
	position: absolute;
	bottom: 1.5em;
	right: 0.5em;
}
.llis .ol-control button {
  background-color: rgba(0,60,136,0.75);
}
.llis .ol-control button:hover,
.llis .ol-control button:focus {
  background-color: rgba(0,60,136,0.95);
}


.llis .main-title,
.llis .section-heading {
	margin-bottom: 20px;
	padding: 0.5em 10px;
	font-weight: normal;
	background-color: #004B87;
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
}
.llis .main-title {
	font-size: 200%;
}
.llis .section-heading {
	font-size: 150%;
	background-color: #4F4F4F;
}
.llis .table-responsive + .section-heading {
	margin-top: 0;
}

.l-spacing-top {
    margin-top: 20px;
}

.llis .btn {
	font-size: 100%;
	background-color: #EEE;
	color: #00F;
	border: 2px solid #999;
	text-shadow: 1px 1px #FFF;
}
.llis .btn:hover,
.llis .btn:focus {
	background-color: #DDD;
	border-color: #666;
	color: #2A6496;
}

.c-btn-llaw,
.c-icon-llaw,
.c-teaser-image {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;	
}

.c-hidden {
	display: none;
}

.c-nowrap {
	white-space: nowrap;
}

/* button LLAW */
.c-btn-llaw {
	display: inline-block;
	padding: 5px 10px;
	border: 3px solid #999;
	border-radius: 50px;
	background-color: #EEE;
	color: #666;
	text-align: center;
	text-shadow: 0 1px 1px #FFF;
	font-size: 100%;
}
.c-btn-llaw:hover,
.c-btn-llaw:focus {
	border-color: #333;
	background-color: #DDD;
	color: #FFF;
}
.c-btn-llaw-content {
	display: inline-block;
	width: 100%;
}

.c-icon-llaw {
	display: inline-block;
	width: 28px;
	height: 28px;
	vertical-align: middle;
	background: url("../images/icon-llaw.png") 0 0 no-repeat;
	background-size: 28px 28px;
}
.c-btn-llaw-text {
	display: inline-block;
	padding: 0;
	vertical-align: middle;
}

.c-dock {
	margin: 0 0 20px;
	text-align: right;
}

.c-general-list li {
	margin-top: 1em;
	margin-bottom: 1em;
}
.c-general-list p {
	margin-bottom: 0.5em;
}

.c-alert-message {
	margin: 1em 0;
}
.c-alert-message-content {
	padding: 20px 20px 0;
	border: 2px solid #ccc;
	border-radius: 4px;	
}

/* data source */
.c-data-table caption {
	display: table-caption !important; /* override the styling from ICMS */
	color: #333;
}
.c-data-table thead th,
.c-data-table .c-data-footer {
	background-color: #CFF;
}
.c-data-table .c-data-table-subheader {
	font-weight: normal;
	background-color: #DDD;
}
.c-data-table--count-table,
.c-data-table--count-table th {
	text-align: center;	
}
.c-data-value {
	width: 30%;
}
.c-data-table--balanced-table {
	table-layout: fixed;
}
.c-data-table .c-data-table-row-separator th,
.c-data-table .c-data-table-row-separator td {
	border-top: 4px solid #DDD;
}
.c-data-table .c-highlight-data {
	font-weight: bold;
	background-color: #FFC000;	
}
.c-data-table > thead > tr > th,
.c-data-table > tbody > tr > th,
.c-data-table > tbody > tr > td {
	/* override the styling defined by bootstrap */	
	padding: 3px 5px;
}


.c-separator {
    margin-top: 30px;
    border-top: 1px solid #ccc;
}
.c-separator-major {
    border-top: 4px solid #999;
    margin: 20px 0;
}


.c-time-range {
	display: table;
	margin-bottom: 10px;
}
.c-time-range label {
	display: block;
}
.c-time-range__element {
	display: table-cell;
	vertical-align: top;
	padding-right: 15px;
}


.c-fieldset {
	display: block;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	padding-block-end: 0;
	border-width: 4px;
	border-style: solid;
	border-color: #ccc;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 10px;
}

.c-fieldset legend {
	float: left;
	display: block;
	width: 100%;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-weight: bold;
	margin-bottom: 10px;	
}

.c-fieldset legend + * {
	clear: both;
}

.c-fieldset-item:after {
	position: relative;
	z-index: 1;
}

.c-fieldset-item input[type="radio"] {
	position: absolute;
}

.c-fieldset-item label {
	display: inline-block;
	padding-left: 20px;
}



.c-caption {
}
.c-caption-image {
	max-width: 100%;
	border: 2px solid #004B87;
	border-radius: 4px;
}
.c-caption-text {
}

/*demo only*/
.c-count-result .c-map,
.c-count-result .c-result-table {
	display: table;
	width: 100%;
	/*height: 200px;*/
	margin: 15px 0;
	text-align: center;
	/*color: #FFF;*/
	/*background-color: #666;*/
	box-sizing: content-box;
}

.c-count-result .c-result-table {
	height: auto;
	background-color: #FFF;
	color: #333;
}

.c-count-result .c-map {
	height: 400px;
	max-height: 400px;
}

.c-count-result .c-map span,
.c-count-result .c-result-table span {
	display: table-cell;
	vertical-align: middle;
	text-shadow: 0 1px 1px #000;
}
/*demo only*/

.llis .c-count-message {
	margin-bottom: 20px;
	padding: 20px 20px 0;
	/*
	border: 3px solid #073E7F;
	background-color: #CCFFFF;
	*/
	border: 3px solid #B60000;
	background-color: #FFC000;
	border-radius: 9px;
	font-size: 120%;
	font-weight: bold;
}
.llis .c-count-message p {
	margin-bottom: 20px;
}

.llis .c-remark-title {
	margin-bottom: 10px;
	font-weight: bold;
}


/* map and map legend */
.c-map {
	margin-bottom: 10px;
}
.llis .c-map-date {
	margin-bottom: 10px;
}

.c-map-legend {
	/*display: inline-block;*/
	/*margin: 10px 0 0;*/
	display: block;
	padding: 10px;
	border: 4px solid #ccc;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.8);
}
.c-map-legend p {
	margin-bottom: 5px;
}
.c-map-legend-title {
	margin-bottom: 10px;
	font-weight: bold;
}
.c-map-legend ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-map-time {
	display: block;
}
/* override the styling defined in other stylesheet */
body #wrap .mainContent .c-map-legend ul {
    margin: 0;
}
.c-map-legend li {
	margin: 0 0 5px;
}
.c-map-legend-color {
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

/* region explanation list */
.llis .c-region-list {
	list-style: none;	
	margin: 0;
	padding: 20px 0 0 0;
}
.llis .c-region-list:after {
	content: ' ';
	display: table;
	clear: both;
}
.llis .c-region-list-item,
.llis .c-region-list-item__full-width {
	display: inline-block;
	margin: 0;
	padding: 0;
	min-height: 215px;
}
.llis .c-region-list-item {
	float: left;
	width: 50%;
}
.llis .c-region-content {
	padding: 0 10px 15px 0;
}
.llis .c-region-image {
	display: inline-block;
	border: 2px solid #004B87;
	border-radius: 4px;	
}
.llis .c-region-image img {
	max-width: 100%;
}

.c-gust-level-1 {
	color: #000000;
}
.c-gust-level-2 {
	color: #93272C;
}
.c-gust-level-3 {
	color: #FF8C00;
}

.c-image-hill {
	width: 20px;
	height: 20px;
}

.c-count-result-error {
	margin: 15px 0;
	padding: 10px 15px;
	border: 3px solid #004B87;
	background-color: #80C6FF;
	border-radius: 8px;
}


/* navigation */
.c-nav-container {
	margin-top: 20px;
	padding: 20px 0;
	border-top: 2px solid #CCC;
}
.c-nav {
	display: table;
	width: 100%;
}
.c-nav-item {
	display: table-cell;
	text-align: right;
}
.c-nav-link {
	display: inline-block;
	padding: 0.5em;
	text-align: center;
	background-color: #F6F6F6;
	border: 2px solid #CCC;
	border-radius: 6px;
}
.c-nav-link:hover,
.c-nav-link:focus {
	border-color: #999;
	background-color: #FFF;
}

/*** rules affected by clfWrapper START ***/
#clf_wrapper .glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}
/*** rules affected by clfWrapper END ***/


/* fixing bootstrap stylesheet issue */
@media (min-width: 992px) {
	.llis .col-md-4 {
		width: 33.33333333%;
	}
}

@media (min-width: 1200px) {
	.llis .col-lg-12 {
		width: 100%;
	}
	.c-map {
		margin-bottom: 0;
		margin-right: 15px;
	}
}


@media all and (max-width:1200px) {
	.c-map-triggers {
		margin-right: 15px;
	}
}

/* specific rules to screen width below 1024px (small desktop size) */
@media all and (max-width:1023px) {
	#wrap .llis .c-region-list {
		margin: 0;
	}

	.llis .c-region-list-item {
		width: 50%;
	}
}

/* specific rules to screen width below 768px (mobile size) */
@media all and (max-width:767px) {
	.table-responsive caption {
		padding-left: 8px;
		padding-right: 8px;
		border-bottom: 1px solid #DDD;
	}

	.table-responsive >.c-data-table--balanced-table >tbody>tr>th,
	.table-responsive >.c-data-table--balanced-table >tbody>tr>td {
		/* override bootstrap rules */
		white-space: normal;
	}

	.c-thumbnail-container {
		padding-top: 80px;
		padding-left: 0;
	}
	.c-thumbnail {
		top: 0;
	}

	.l-wrap-sm {
		display: table;
	}

	.c-charts {
		min-height: 200px;
	}

	.c-iso,
	.c-iso-icon,
	.c-iso-text {
		display: block;
	}
	.c-iso-text {
		padding-top: 0;
		vertical-align: top;
	}

	.llis .c-region-list-item {
		float: none;
		width: 100%;
	}

	.table-responsive caption {
		padding-left: 8px;
		padding-right: 8px;
		border-bottom: 1px solid #DDD;
	}

	.c-charts {
		min-height: 200px;
	}

	.c-map-triggers {
		margin: 0;
	}
}

/* specific rules to screen width below 500px (mobile size) */
@media all and (max-width:500px) {
	.c-dock {
		text-align: center;
	}

	.c-icon-llaw {
		width: 30px;
		height: 30px;
		background-size: 30px 30px;
	}
}