@charset "UTF-8";
/*------------------------------------------------------------------------*-
    $Template "SystemMain" Ajust / 調整樣版:SystemMain樣版
-*------------------------------------------------------------------------*/
/*把調整樣版的css樣式寫在這裡*/
body {
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", "蘋果儷中黑",
		"Lucida Sans Unicode", "Microsoft Yahei", sans-serif;
	color: #0d3754;
	font-weight: bold;
}

.btn {
	font-weight: bold;
}

#header.sell {
	border-top: 4px solid #39b54a;
}

.sell.btn-main-nav {
	background: url(../images-template/img-temp-systemMain/btn-sell-nav.png)
		center center no-repeat;
}

.main-nav-metismenu {
	font-size: 21px;
}

.main-nav-metismenu ul a {
	color: #0d3754;
	font-weight: bold;
}

#content-body {
	padding: 0px;
}

.sell .main-nav-metismenu ul a {
	border-top: 1px solid white;
}

.main-nav-metismenu ul ul a {
	background-color: #d9eefd;
}

.sell .main-nav-metismenu ul ul a {
	background-color: #b0e1b7;
}

.sell .main-nav-metismenu {
	border-bottom: 1px solid white;
}

#main-nav-inner {
	background-color: #d9eefd;
}

.sell#main-nav-inner {
	background-color: #b0e1b7;
}

.main-nav-metismenu>ul>li.active>a {
	background-color: #eef6f9;
}

.sell .main-nav-metismenu>ul>li.active>a {
	border-left: 4px solid #39b54a;
	background-color: #b9edc1;
}

.sell .main-nav-metismenu>ul>li>ul {
	border-left: 4px solid #39b54a;
}

#content-header.sell {
	background-color: #b9edc1;
	border-bottom: 1px solid #cbd9e0;
}

#content-header {
	margin-bottom: 0px;
}

.user-logout:hover {
	color: white;
	background-color: #23b7e5;
}

.user-photo {
	width: 32px;
	height: 32px;
	object-fit: cover;
}

.user-header {
	background-color: #0084cd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
}

.sell .user-header {
	background-color: #39b54a;
}

.user-logout {
	background-color: transparent;
	color: white;
	border-color: white;
}

.logo-image {
	max-height: 50px;
	width: auto;
}
/* 調整alertfy z-index 才不會被bootstrap modal蓋住 */
.alertify-notifier {
	z-index: 3060;
}

.alertify .ajs-modal {
	z-index: 3060;
}

.alertify .ajs-dimmer {
	z-index: 3060;
}

.input-group>span, selectInput {
	word-break: normal;
	width: auto;
	display: block;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: hidden;
}

form>.panel-heading-custom {
	background: skyblue;
	color: black;
}

.button-container {
	text-align: center;
}

.button {
	margin-bottom: 1.3em;
}

.panel-default>.panel-heading {
	color: white;
	background-color: #0084cd;
}

.panel-title, .info-matrix-title, .fillin-table legend {
	font-size: 28px;
	font-family: Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", "蘋果儷中黑",
		"Lucida Sans Unicode", "Microsoft Yahei", sans-serif;
}

.panel-body, .panel-body h1, .panel-body h3, .panel-body input,
	.info-matrix-body span, .fillin-table th, .fillin-table input,
	.fillin-table textarea, .fillin-table select, .fillin-table label, .fillin-table span {
	font-size: 26px;
}

.btn:not(.btn-main):not(.btn-trade) {
	font-size: 20px;
}

.btn-main {
	font-size: 40px;
}

.form-group.required .control-label:before {
    color: red;
    content: "*";
    position: absolute;
    margin-left: -15px;
}

th.required .control-label:before {
    color: red;
    content: "*";
    position: absolute;
    margin-left: -8px;
}

.not-yet {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: transparent;
	text-shadow: rgba(0, 0, 0, 1) 0px 0px 10px;
	text-shadow: rgba(0, 0, 0, 1) 0px 0px 10px 0.01em; /*for IE 9 up*/
}

.not-yet .panel-heading {
	text-shadow: none;
	background-color: #ff2d2d;
}

.not-yet .panel-heading.sell {
	background-color: #ff2d2d;
}

.panel-heading.sell {
	background-color: #39b54a;
}

.not-yet .panel-heading.public {
	background-color: #ff2d2d;
}

.panel-heading.public {
	background-color: #0080c0;
}

.panel-heading {
	border-radius: 10px;
}

.panel-default {
	border-radius: 10px;
}

.p-btn-trade {
	text-align: center;
}

.btn-trade {
	color: rgb(76, 76, 76);
	background-color: #f3eaa3;
	font-size: 28px;
}

#powerPlan-content>.row {
	border-radius: 10px;
	padding: 8px;
	margin: 20px 20px;
}

#powerPlan-content>.solar {
	border: 3px solid #cf540a;
}

#powerPlan-content>.wind {
	border: 3px solid #004080;
}

#powerPlan-content>.bio {
	border: 3px solid green;
}

#powerPlan-content legend {
	font-size: 34px;
	font-weight: bold;
	width: 35%;
	padding: 10px;
	border-radius: 10px;
	color: white;
}

#powerPlan-content>.solar>legend {
	background-color: #cf540a;
}

#powerPlan-content>.wind>legend {
	background-color: #004080;
}

#powerPlan-content>.bio>legend {
	background-color: green;
}

.solar .panel-body {
	border-radius: 10px;
	background-color: #fff7f2;
}

.wind .panel-body {
	border-radius: 10px;
	background-color: #f2f9fd;
}

.bio .panel-body {
	border-radius: 10px;
	background-color: #f2fff5;
}

.shadow {
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px
		rgba(0, 0, 0, 0);
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px
		rgba(0, 0, 0, 0);
	transition-duration: .4s;
}

.grayout {
	opacity: 0.3;
	filter: alpha(opacity = 30);
	transition-duration: .4s;
}

.title {
	text-align: center;
	margin-bottom: -40px;
	height: 40px;
	line-height: 40px;
	color: white;
	background-color: #0084cd;
	border-radius: 10px;
	width: 100%;
	margin: 0 auto;
}

.default-height {
	min-height: 80vh;
}

.index-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.table-header {
	color: white;
	background-color: #0e3755;
}

.table-header.sell {
	background-color: #39b54a;
}

.table-header th {
	text-align: center;
}

.self>.panel-body {
	background-color: #d9eefd;
}

.self.sell>.panel-body {
	background-color: #f5ffe8;
}

.flex {
	display: flex;
}

.center-background {
	background-color: #ecf6fd;
	padding: 0px 20px 20px 20px;
	border-radius: 10px;
}

.font-title {
	font-size: 30px;
}

.index-background {
	background-image: url(../../images/bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.banner-apply {
	background-image: url(../../images/banner-apply.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-apply {
	background-color: #ced0c2;;
}

.banner-public {
	background-image: url(../../images/banner-public.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-public {
	background-color: #bdccd4;
}

.banner-join {
	background-image: url(../../images/banner-join.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-join {
	background-color: #eee7d4;
}

.banner-award {
	background-image: url(../../images/banner-award.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-award {
	background-color: #eee7d4;
}

.banner-info {
	background-image: url(../../images/banner-info.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-info {
	background-color: #dfe9ea;
}

.banner-buy {
	background-image: url(../../images/banner-buy.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-buy {
	background-color: #dfdbd1;
}

.banner-sell {
	background-image: url(../../images/banner-sell.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#content-header.banner-sell {
	background-color: #e2dfd4;
}

.red-bold {
	color: red;
	font-weight: bold;
}

.d-none {
	display: none;
}

.home-sub-title {
	margin-top: 5px;
	margin-bottom: 5px;
}

.arrow-text {
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	color: black;
}

.no-decoration {
	text-decoration: none;
}

.no-decoration:hover {
	text-decoration: none;
}

.btn-default {
	background-color: #FFFF99;
}

.btn-default:hover {
	background-color: #FFD306;
}

.info-text {
	font-size: 15px;
	margin-bottom: 0px;
}

.case-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.case-item {
	margin: 5px;
}

@media ( min-width : 768px) {
	.form-horizontal .control-label {
		text-align: left;
	}
}

/*------------------------------------------------------------------------*-
    $Your Component / 您自訂可共用的內容元件CSS樣式
-*------------------------------------------------------------------------*/
.table-bordered {
	border: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}
/*第一欄第一列：左上*/
tr:first-child th:first-child {
	border-top-left-radius: 10px;
}
/*第一欄最後列：左下*/
tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
/*最後欄第一列：右上*/
tr:first-child th:last-child {
	border-top-right-radius: 10px;
}
/*最後欄第一列：右下*/
tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.table-responsive {
	border-radius: 10px;
}

.btn {
	border-radius: 10px;
}

.sell-background {
	background-image: url(../../images/sell-background.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.buy-background {
	background-image: url(../../images/buy-background.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#header-subfunctions>li, #header-subfunctions li.subfunc-level01 {
	margin: 5px;
	height: 50px;
	line-height: 50px;
}

.website-title {
	font-weight: bold;
}

.total-kwh-icon {
	background-color: #8ec31f;
	font-size: 20px;
}

.average-price-icon {
	background-color: #0068b7;
	font-size: 20px;
}

.open-info {
	border-radius: 30px;
	padding: 10px;
	position: fixed;
	z-index: 2100;
	background-color: #FFFF93;
	bottom: 40px;
	left: 10px;
	font-size: 16px;
	font-weight: bold;
}

.f-w-b {
	font-weight: bold;
}

.bg-gray {
	background-color: #f0f0f0;
}

.sell>.bg-bid-header {
	background-color: #e8ffc4 !important;
}

.bg-bid-header {
	background-color: #acd6ff !important;
	color: black !important;
}

.bid-info-text {
	color: #0084cd;
	font-size: 14px;
	margin-top: 5px;
}

.sell>.panel-heading {
	background-color: #33cc33;;
}

.user-empName {
	font-size: 18px;
}

.text-red {
	color: red;
}

.logo-text {
	background-color: white;
	color: black;
	font-size: 20px;
}

.contact-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 20px;
	min-height: 50vh;
	flex-wrap: wrap;
}

.contact-img {
	font-size: 70px;
}

.w-100 {
	width: 100%;
}

.vh-80 {
	height: 80vh;
}

.download>li {
	margin-top: 10px;
	margin-bottom: 10px;
}

.download a {
	font-size: 20px;
	text-decoration: none;
}

.img-responsive {
	margin-left: auto;
	margin-right: auto;
}

.main-logo {
	float: left;
}

@media ( max-width : 800px) {
	.main-logo {
		display: none;
	}
}

.main-prod-logo {
	float: left;
}

.vertical-align {
	display: flex;
	align-items: center;
}
/*------------------------------------------------------------------------*-
    $Your Style in content area / 依各頁特殊規劃的所撰寫的CSS樣式
-*------------------------------------------------------------------------*/
.power-table table, .power-table td, .power-table th {
	border: 1px solid black;
}

.power-table table {
	border-collapse: collapse;
}

.power-table {
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 16px;
}

.power-table thead {
	background-color: orange;
}
/*第一欄第一列：左上*/
.power-table tr:first-child th:first-child {
	border-top-left-radius: 0px;
}
/*第一欄最後列：左下*/
.power-table tr:last-child td:first-child {
	border-bottom-left-radius: 0px;
}
/*最後欄第一列：右上*/
.power-table tr:first-child th:last-child {
	border-top-right-radius: 0px;
}
/*最後欄第一列：右下*/
.power-table tr:last-child td:last-child {
	border-bottom-right-radius: 0px;
}
/*------------------------------------------------------------------------*-
    $Third Party / 其他第三方樣式
-*------------------------------------------------------------------------*/