#navbar {
	display: block;
 	height:300px;
	/* background: linear-gradient(155deg,#5c6977,#d9ddf2,#dde4ed); */
	/* background-image: linear-gradient(155deg, #627594 0%, #a8b8d8 100%);; */
	font-size: 20px;
	color: #eee; 
	border-bottom:  #4b6abe 1px solid;
}

.nav-title {
	padding: 8px;
	display: flex;
	/* background: linear-gradient(155deg,#5c6977,#d9ddf2,#dde4ed); */
}
.nav-item {
	padding-left:5px;
	padding-right:5px;
	display:table-cell;
	color:#eee;
	font-size: 20px;
	font-weight:400;
}

.align-right {
	position:absolute;
	right:0;
	padding-right:20px;
	display:inline-table;
	top:10px;
}

@media screen and (max-width: 980px){
	#navbar {
		font-size: 3.5vh;
		background:#5c6977;
		height: 200px;
	}
	.nav-item {
		font-size: 2.5vh;
	}
	.align-right {
		display: none
	}
}



#banner{
	border-top: #4b6abe 1px solid;
	/* background: url(img/home1.jpg) ; */
	height: 257px; 
	background-size: 50vw;
	/* background-position-y: -568px; */
	display: table;
	width: 100vw;
	background-repeat: repeat-y;

}

#bannerLeft{
	width:30vw;
	background: url(home2.jpg);
	height: 257px; 
	background-repeat: repeat-y;
	background-size: auto 100%;
	display: table-cell;
	opacity:0.7;
	vertical-align: top;
	/* background-position: center; */
}

#bannerRight{
	width:30vw;
	background: url(home3.jpg);
	height: 257px; 
	background-repeat: repeat-y;
	background-size: auto 100%;
	display: table-cell;
	opacity:0.7;
	vertical-align: top;
	/* background-position: center; */
}

#bannerCenter{
	width:40vw;
	background: url(home1.jpg);
	height: 257px; 
	background-repeat: repeat-y;
	background-size: auto 100%;
	display: table-cell;
	background-position: center;
}



/* ul.tabs {
	margin: 0;
	font-size: 14px;
	width: 100%;
	height: 32px;
	padding-left: 0;
	background-color: rgba(255, 255, 255, 1);
}
ul.tabs li {
	float: left;
	height: 29px;
	line-height: 29px;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	display: block;
	padding: 0 10px;
	color: #4b6abe;
	text-decoration: none;
}
ul.tabs li:hover {
	border-bottom: 3px solid #4b6abe;
}
ul.tabs li.active  {
	border-left: 0;
	border-bottom: 3px solid #4b6abe;
	background: #eee;
}

ul.tabs li a.active  {
	border-left: 0;
	background: #eee;
} */

#menu-toggle {
	cursor: pointer;
	font-size: 16px;
	vertical-align: middle;
}

#menu-toggle:hover {
	border-radius:22px;
	background-color:#4b6abe;
	border: 1px solid #4b6abe;
	color:#eee;
}

#menu {
  display: table-cell;
	z-index: 100;
	display: table-cell;
	width: 230px;
	height: calc(100vh - 300px);
	background: #404953;
	/* border-right: #eee solid 1px; */
	position: absolute;
	color: rgb(189, 189, 189);
	box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 1px 1px rgba(0,0,0,.2);
}

#menu ul{
  list-style: none;
  margin:0;
  margin-block-start:0;
	padding-inline-start: 0;
	padding-left: 0;
}

#menu li {
	padding:10px;
	font-weight:400;
	font-size: 14px;
}

#menu li:hover {
	color: #eee;
	cursor: pointer;
	background: #5c6977;
	border-left: #4b6abe solid 10px;
}

.hover {
	color: #eee;
	cursor: pointer;
	background: #5c6977;
	border-left: #4b6abe solid 10px;
}

#menu li:active {
	color: #4b6abe;
	background: #cccccc;
	border-left: #4b6abe solid 10px;
}

#menu a {
	line-height: 20px;
	position: fixed;
	padding-left: 5px;
}

.menu-icon {
	padding:5px;
	line-height: 20px;
	font-weight:600;
  font-size: 16px;
}


@media screen and (max-width: 980px){
	#menu-toggle {
		font-size: 3vh
	}

	#menu{
		width:40vw;
		height: calc(100vh - 200px);
	}

	#menu li {
		padding:1.4vh;		
		font-size: 2.4vh
	}
	.menu-icon {
		font-size: 2vh
	}
}

/* .menu-item {
	padding:10px;
	color: rgb(189, 189, 189);
	font-weight:400;
	font-size: 14px;

}
.menu-item:hover{
	color: #eee;
	cursor: pointer;
	background: #5c6977;
	border-left: #4b6abe solid 3px;
}
.menu-item:active{
	color: #4b6abe;
	background: #cccccc;
	border-left: #4b6abe solid 3px;
} */

ul.menu-container li.active{
	color: #4b6abe;
	font-weight:600;
	background: #9dc9f4;
	border-left: #4b6abe solid 10px;
}

ul.menu-container li.active:hover{
	color: #4b6abe  !important; 
	font-weight:600;
	background: #9dc9f4 !important;
	border-left: #4b6abe solid 10px;
} 

#menu-product{
	list-style: none;
	display: none;
}

#menu-product li{
	/* background: #404953; */
	border-left: #4b6abe solid 10px;
}

#menu-product li:hover{
	border-left: #896eb6 solid 20px;
}

ul.menu-product li.active{
	color: #896eb6;
	font-weight:600;
	background: #b09cc4;
	border-left: #896eb6 solid 20px;
}


ul.menu-product li.active:hover{
	color: #896eb6  !important; 
	font-weight:600;
	background: #b09cc4 !important;
	border-left: #896eb6 solid 20px;
}

.menu-item-item {
	padding:10px 0px 10px 10px;
	color: #666;
	font-weight:400;
	font-size: 14px;
	background:#eee;
	cursor: pointer;
	display: none;
}

#main {
	display: table-cell;
	height: calc(100vh - 300px);
  position: absolute;
  left: 230px;
	overflow-y: overlay;
	background: linear-gradient(135deg,#e9edf2,#dde4ed);
}

#main-content {
	width: calc(100vw - 230px);
}

.main-manage-title {
	background: #fff;
	padding-left:10px;
}

.main-card-title, .main-manage-title{
	color:#4b6abe;
	font-weight:400;
	font-size: 18px;
	line-height:50px;
	height:50px;
}
.upload {
	height:40px;
	color:#4b6abe;
	font-weight:400;
	font-size: 18px;
	padding-left:10px;
}
.upload-filename{
	font-weight:400;
	font-size: 14px;
}

#upload-status{
	padding-left:10px;
	font-weight:400;
	color:#666;
	font-size: 14px;
}

#scan-jrxml{
	width: calc(100vw - 255px);
}

#section-add-tpl, #section-edit-tpl{
	width: calc(100vw - 235px);
}

#section-add-folder, #section-edit-folder{
	width: calc(100vw - 255px);
	/* background: white; */
}

@media screen and (max-width: 980px){
	#main{
		left:0;
		width: 100vw;
		height: calc(100vh - 200px);
		}

	.main-manage-title {
		font-size: 2vh;
		width: 100vw;
	}
	
	#main-content {
		width: 100vw;
	}

	#article{
		font-size: 2.4vh !important;
	}

}

/* #section-add-folder input{
	line-height: 30px;
	padding: 0px;
	border: 0;
	width: 198px;
} */

.lable-title{
	padding-left: 5px;
	padding-right: 5px;
	background-color: #e5f6ff;
	font-weight: 400;
	/* border: #e5f6ff 1px solid; */
	border-right: 0;
	font-size: 14px;
	line-height: 30px;
	height: 30px;
	display: inline-block;
	width: 150px;
	border:0
}

.lable-input, .lable-input select{
	/* border: #ccc 1px solid; */
	display: inline-block;
	line-height: 28px;
	/* border-left: 0; */
	border: 0;
	width: 200px;
	color:666;
	height:30px;
}

.lable-input input{
	line-height: 30px;
	padding: 0px;
	border: 0;
	width: 198px;
}

.CodeMirror{
	width: calc(100vw - 255px);
	font-size :14px;
	line-height: 1.2;
}

.button {
	padding:5px;
	font-size: 14px;
	border:transparent  solid 2px;
	cursor:pointer;
}

.button:hover {
	border-radius:15px;
	background: #e5f6ff;
	border-color: #e5f6ff;
}

.button-red {
	color:#ff3322;
}

.button-red:hover {
	background: #ffe5e5;
	border-color:  #ffe5e5;
}

.button-inverse{
	background: #4b6abe;
	padding:5px;
	font-size: 14px;
	color:#fff;
	border: #4b6abe solid 2px;
	display:inline-block;
	line-height: 15px;
    height: 15px;
	cursor:pointer;
}

.button-inverse{
	background: #4b6abe;
	
}

.button-inverse:hover{
	color:#e5f6ff;
}

.button-delete{
	background: #ff3322;
	padding:5px;
	font-size: 14px;
	color:#fff;
	border: #ff3322 solid 2px;
	line-height: 15px;
    height: 15px;
	display:inline-block;
	cursor:pointer;
}

.item-success{
	color: #23c367;
}

.item-failed{
	color: #ff3322;
}



.hide {
	color:transparent;
	
}

.hide:hover {
	color:transparent;
	background:transparent;
	border-color:transparent;
	cursor:default
}

#preview-jrxml, #edit-jrxml {
	width: calc(100vw - 255px);
	height: calc(100vh - 300px);
}

.resource-table table{
	padding:0px;
	border-collapse:collapse;
	width: calc(100vw - 255px);
	font-size:14px;
	background: #fff;
}
.resource-table table th{
	height:25px;
	line-height:25px;
	font-weight:400;
	background: #e5f6ff;
	border-top: rgb(200, 200, 200) solid 1px;
	text-align: left;
	padding-left:10px
}
.resource-table table td{
	height:30px;
	line-height:30px;
	border-top: rgb(200, 200, 200) solid 1px;
	padding-left:10px
}

.pb-container{
	height:20px;
}

.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
    color: #000!important;
background-color: #f1f1f1!important;}

.w3-green, .w3-hover-green:hover {
    color: #fff!important;
    background-color: #4CAF50!important;
}

.searchbox {
	padding:10px;
}

.manage-table {
	color: #666;
	padding-left: 10px;
	padding-right: 10px;
	
}
.manage-table table{
	padding:0px;
	border-collapse:collapse;
	width: 100%;
	font-size:14px;

	background: #fff
}
.manage-table table th{
	height:40px;
	font-weight:600;
	background: #e5f6ff;
	/* border-top: rgb(200, 200, 200) solid 1px; */
	text-align: left;
	padding-left:10px;
	color: #4b6abe;
}
.manage-table table tr:hover{
	box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0,0,0,.1);
}

.manage-table table td{
	height:40px;
	border-top: rgb(230, 230, 230) solid 1px;
	padding-left:10px
}
.folder {
	color: #4b6abe;
	font-size:14px;
	cursor:pointer;
	font-weight:600;
}
.folder-icon {
	padding-right:5px;
}

.folder-name {
	font-weight:400;
}
.folder-name:hover {
	text-decoration:underline;
	font-weight:600;
}

.child {
	font-size:14px;
	display:none;
}

.child-icon {
	padding-right:10px;
	padding-left:10px;
}

.hsc-card{
	padding: 20px;
	margin: 20px;
	border-left: #4b6abe solid 10px;
}

.container {
  display: initial;
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  cursor: pointer;
;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}

.card-list{
	color:#666;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style-type: none;
}

.hsc-card-secondary{
	/* display: block; */
	height: 100%;
	/* background: linear-gradient(135deg,#e9edf2,#c3cfdf); */
	/* box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0,0,0,.1); */
	padding: 1rem;
	margin: 1rem;
	/* border-radius: 4px; */
	cursor: pointer;
	border-left: #896eb6 solid 10px;
	/* width: 200px; */
}

#product-title {
	font-weight: 600;
}

#product-content li{
	margin-bottom: 10px
}

.product-item-title {
	font-weight: 600;
}


body {
	margin:0;
	font-family: "Microsoft YaHei",微軟雅黑,"MicrosoftJhengHei", Roboto,Noto Sans,-apple-system,BlinkMacSystemFont,sans-serif, Helvetica, Arial, sans-serif;
	overflow: hidden;
	height:100vh
}

.block{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	opacity: .5;
	/* background-color:gray; */
	z-index:998;
	pointer-events: none;
	/* visibility: hidden; */
	}

#alert-window-large{
	  width: 100vw;
	  height: 80%;
	  left: 0;
	  top: 10%;
	  vertical-align: top;
	}

#alert-window-large td{
	padding:10px
}

#alert-window, #alert-window-large, #alert-window-mid{
		z-index: 1000;
		color:#666;
		padding: 20px;
		
		 /* width: 300px; */
	  /* height: 200px; */
	  /* left: 45%; */
	  position: fixed;
	  /* top: 35%; */
	  background-color: white;
	  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	}