body{
	margin:0px;
	font-size:16px;
}
#topHeader{
	background-color:#f6f6f6;
	padding:10px;
}

#content{
	margin:10px;
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1600px;
    }
}





#main{
	padding:20px;
}

a{
	text-decoration:none;
}
a:link,a:visited{
	color:#044978;
}
a:hover{
	color:#a81633;
}

h1.pageTitle{
	border-left: solid 5px #5193bd;
    padding: 6px 15px;
    color: #0f3c59;
    border-radius: 10px;
    display: inline-block;
    border-right: solid 5px #5193bd;
    background-color: #edf8ff;
}

h1{
	font-size: 1.5rem;
	margin-bottom:20px;
}
h1 i.fa{
	margin-right:10px;
}
h2{
	font-size: 1.4rem;
	margin-bottom:16px;
}
h3{
	font-size: 1.2rem;
	
}
/* DivTable.com */
div.table{
	display: table;
	border: solid 1px #6c6c6c ;
	width: 100%;
	max-width: 100%;
	font-size:16px;
}
div.tableRow{
	display: table-row;
}
div.tableRow:nth-child(even) {
	display: table-row;
    background-color:#eaeaea;
}
div.tableRow:nth-child(odd) {
	display: table-row;
    background-color:#fafafa;
}

div.tableRow:hover{
    background-color:#ffe4a1;
}

div.tableRow.inactive,div.tableRow.inactive span,div.tableRow.inactive div,div.tableRow.inactive a,div.tableRow.inactive i{
	color:#9a9a9a;
    background-color:#eaeaea;
}


.bgPink{
	background-color:#fadcf9!important;
}
.bgLightGreen{
	background-color:#e4fcde!important;
}

.bgOut{
	background-color:#FFC8FE!important;
}

.bgIn{
	background-color:#D2FFC8!important;
}

div.tableHeading {
	background-color: #EEE;
	display: table-header-group;
}
div.tableHead {
	border-left: 1px solid #fff;
    border-top: 1px solid #fff;    
    color:#fff;
    background-color: #F47636;
    text-align: center;
	display: table-cell;
	padding: 3px 10px;
	vertical-align: middle;
}

div.tableCell{
	border-left: 1px solid #fff;
    border-top: 1px solid #fff;    
	display: table-cell;
	padding: 5px 8px;
}

div.tableCell div{
	margin-top:10px;
	margin-bottom:10px;
}




div.tableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
div.tableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
div.tableBody {
	display: table-row-group;
}


/* Big Table for Seletor*/
div.tableBig{
	display: table;
	border: solid 1px #6c6c6c ;
	width: 100%;
	max-width: 100%;
	font-size:24px;
}

.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}

.label1{
	color:#067ebf;
	font-weight: bold;
	background-color: #eaeaea;
	margin: 10px;
	padding: 6px 28px;
	display: inline-block;
	border-radius: 5px;;
}

.label2{
	color:#f0113a;
	font-weight: bold;
	background-color: #eaeaea;
	height:35px;
	margin: 10px;
	padding: 6px 28px;
	display: inline-block;
	border-radius: 2px;
	border: none;
	font-size: 24px;
}


.itemSelected,.itemSelected div,.itemSelected span{
	background-color: #B6C4B1;
	color: #fff;
}


i.fa{
	font-size:22px;
	margin-left:4px;
	margin-right:4px;
}

i.fa-trash{
	color:red;
}


.currency{
	text-align:right;
}


@media screen and (max-width:768px){
	.hidemobile{
		display: none!important;
	}	
}


/* menu */
ul.menu1{
	padding-left: 0px;
}
ul.menu1 > li{
    display: inline-block;
	vertical-align: top;
    margin: 4px;
	padding: 6px 12px 6px 12px;
	background-color:#dadada;
	border-radius: 5px;
}
ul.menu1 > li:hover{
    background-color: cadetblue;
}

ul.menu1 > ul{
    display: block;
}

ul.menu1 > ul > li{
    display: block;
}

ul.submenu1 li{
    display: block;
}

/* Filter Box*/
.filterbox{
	margin-top:20px;
	margin-bottom:20px;
	display: flex;
}

.filterbox input[type=text]{
	min-width: 180px;
	height:30px;
	font-size:18px;
}
.filterbox button{
	height:32px;
	margin-top:0px;
	padding-top:0px;
	font-size:20px;
}


.formHead{
	width:150px;
	vertical-align: middle;
}
.formField{
	width:400px;
	padding: 10px !important;;
}


input[type=text],input[type=number],select,option{
	width: 90%;
	height:30px;
	font-size: 16px;
}

input[type=submit],input[type=button]{
	cursor:pointer;
	width: 150px;
    height: 35px;
    border-radius: 6px;
    border: 1px solid #9c9c9c;
	font-size:16px;
}

input[type=submit]{
	background-color: #65e683;
	border-color:#289c44;
}

textarea{
	width:100%;
	height:200px;
	padding: 6px;
    line-height: 25px;
}

input.shortField,select.shortField{
	width:150px;
}
input.mediumField,select.mediumField{
	width:300px;
}

a.button1{
	border: solid 1px #6c6c6c;
    padding: 6px 10px;
    height: 28px;
    display: inline-block;
    margin-top: 3px;
    background-color: #17aed4;
	border-radius:3px;
    color: #fff;
	cursor:pointer;
}

a.button1[disabled]{
	border: solid 1px #bababa;
    padding: 6px 10px;
    height: 28px;
    display: inline-block;
    margin-top: 3px;
    background-color: #bababa;
	border-radius:3px;
    color: #fff;
	cursor:default;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #77b5f7;
    border-color: #007bff;
}

a.buttonSmall{
	border: solid 1px #6c6c6c;
    padding: 4px 4px;
    height: 24px;
    display: inline-block;
    margin-top: 1px;
    background-color: #66a9ba;
    color: #fff;
	border-radius: 3px;
}




button.buttonBig{
	cursor: pointer;
	border: solid 1px #6c6c6c;
    margin-top:20px!important;
	margin-bottom:20px;
	padding: 8px 18px;
    width:180px;
    display: inline-block;
    margin-top: 2px;
    background-color: #f01a0e;
    color: #fff;
	font-size: 24px;
	border-radius: 5px;
}

button.buttonBig:hover{
    background-color: #bf0606;

}



button{
	cursor:pointer;
    border-radius: 5px;
    height: 36px;
    border: none;
    background-color: #e2e2e2;
    color: #333;
    font-size: 18px;
    padding: 5px 12px;
    text-align: center;
	margin:2px;
}
button:hover{
	background-color:#d3d3d3;
}

button.blue{
    background-color: #55698a;
	color: #fff;
}
button.blue:hover{
    background-color: #637a9e;
}

button.green{
    background-color: #398566;
	color: #fff;
}
button.green:hover{
    background-color: #50a683;
}


button.red{
    background-color: #a31a41;
	color: #fff;
}

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

.red{
	color:#a31a41;
}

.green{
	color:#398566;
}

span.price{
	color:red;font-size: 18px;font-weight: 700;
}

.readonlyText{
	background-color: #eee;
    border: solid 1px #dfdfdf;
    padding: 2px;
}


@media screen and (max-width:768px){
	.filterbox input[type=text]{
		width: 180px;
		height:30px;
		font-size:22px;
	}

	form input[type=text]{
		width: 150px;
	}
}


/* Form INPUT */


/* other */
.hightlight {
	position: relative;
	animation-name: blink;
	animation-duration: 2s;
	animation-timing-function: ease-in;
  }
  @keyframes blink {
	0% {
	  background-color: #fccaca;
	}
	40% {
		background-color:  #f0b1b1;
	}
	60% {
		background-color:  #fccaca;
	}
	100% {
		background-color: #f0b1b1;
	}
  }





  /*  Jquery alert/confirm*/
  .alertCss{
	width:200px;
  }

  .confirmCss{
	width:200px;
  }



/*popup window */
.popupWindow{
	display: none;
	width: 350px;
	padding: 5px;
	height: 350px;
	overflow-y: scroll;
	border: solid 1px #aaa;
	box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.15);
	position: absolute; 
	background-color: #fff;
}
.popupWindow .popupClose{
	position: absolute;
	top:3px;right:4px;
	cursor: pointer;
	display: inline-block;
    color: #555;
    font-size: 20px;
}

/* 隱藏滾動條 */
div::-webkit-scrollbar {
	width: 8px;
	/* 設置滾動條的寬度 */
}

/* 滾動條的滑軌 */
div::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
	/* 可選：設置圓角 */
}

/* 滾動條的滑塊/把手 */
div::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
	/* 可選：設置圓角 */
}

/* 當鼠標懸停在滾動條上時 */
div::-webkit-scrollbar-thumb:hover {
	background: #555;
}




.priceTag{
	display: inline-block;
	margin:10px;
	color: blue;
    cursor: pointer;
}