body {
	background: url(../img/bgPattern.png) repeat;
}
td {
	vertical-align: middle !important
}
.page-header {
	letter-spacing: 2px;
	text-transform: uppercase;
}
hr.hrmargin10 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.page-header .material-icons {
	background: rgba(255, 255, 255, 1);
	padding: 5px;
	border-radius: 50%;
	border: 4px solid #3186a9;
}
.navbar-collapse .navbar-nav li a:hover {
	background-color: rgba(255,255,255,0.1);
}
.navbar-collapse .navbar-nav li a {
	-webkit-transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	transition: all ease-in-out 0.2s;
}
.nav.navbar-nav.navbar-right li.dropdown a.dropdown-toggle {
	padding-top: 18px;
	padding-bottom: 18px;
}
.table>thead>tr>th {
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	text-align: center;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: normal;
}
.table td:nth-of-type(1) {
	text-align: center;
}
.table-hover td {
	cursor: pointer;
}
.table tr td {
	vertical-align: middle;
}
#userList td:nth-of-type(2) {
	text-align: center;
}
.modal-content .modal-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-bottom: 10px
}
.modal-content .modal-body+.modal-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 10px
}
h4.modal-title .material-icons {
	vertical-align: bottom;
}
.checkbox label span .material-icons {
	vertical-align: bottom
}
.checkbox label {
	margin-left: 10px;
}
.checkbox label:first-child {
	margin-left: 0px;
	color: #313131;
}
.checkbox.jobFilterSet {
	background-color: rgba(0, 0, 0, 0.04);
	border-radius: 5px;
	display: inline-block;
	padding: 5px 10px;
	border: 2px solid rgba(0, 0, 0, 0.13);
}
.checkbox.jobFilterSet label {
	font-size: 14px;
}
.checkbox.jobFilterSet label .checkbox-material, .checkbox.jobFilterSet label .checkbox-material span {
	width: 18px;
	height: 18px;
}
#listDevice .btn-group-justified {
	box-shadow: none;
	border-top: 5px solid rgba(0, 0, 0, 0.14);
	border-bottom: 5px solid rgba(0, 0, 0, 0.14);
}
#listDevice .btn-group-justified .btn {
	padding: 8px 10px;
	box-shadow: none
}
.mapListSearch {
	padding: 5px 20px 10px 20px;
}
.mapListFilter {
	text-align: center;
	border-bottom: 5px solid rgba(0, 0, 0, 0.14);
}
.mapListFilter .checkbox label {
	margin: 0px 5px;
}
.mapListFilter .checkbox label img {
	width: 30px;
	vertical-align: middle;
}
.mapListDetail ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.mapListDetail ul li {
	padding: 10px 20px;
	cursor: pointer;
	color: #AEAEAE;
	border-bottom: 1px solid rgba(0,0,0,0.4)
}
.mapListDetail ul li img {
	width: 30px;
}
.mapListDetail ul li:hover {
	background-color: rgba(0, 0, 0, 0.1);
}
.mapListDetail ul li.active {
	color: #50B884;
}
/*---- Popup Map -------*/
.gm-style-iw {
	margin-left: 13px;
}
.popupMapArea {
	width: 100%;
	padding: 20px 0px;
	text-align: center;
}
.popupMapArea .mapPopupDetail {
	clear: both;
	margin-bottom: 10px
}
.popupMapArea .label.label-info {
	font-size: 13px;
}
.popupMapArea hr {
	margin-top: 10px;
	margin-buttom: 10px;
}
/*---- EndPopup Map -------*/


#customerList td:nth-of-type(2), #customerList td:nth-of-type(n+8) {
	text-align: center;
}
#cusJobList td:nth-of-type(n+2):nth-of-type(-n+4) {
	text-align: center;
}
#cusJobList td:nth-of-type(6) {
	text-align: right;
}
.formG11C .form-group {
	margin: 0px;
	padding:0px;
}
.formG11C .form-group label.control-label {
	color: #313131;
	font-size: 16px;
}

.formG11C .radio.radio-inline{
	padding-left: 0px;
}


.formG11C .radio label{
	padding-left: 30px;
	    text-align: left;
	color: #313131;
}

.formG11C .radio label .circle{
	left: 0;
    margin-left: 4px;
}
.formG11C .radio label .check{
	left: 4px;
}
 
.formG11C .input-group-addon{
	padding:0px 15px 0px 0px;
	font-size:1.2em;
	line-height: 1em;
	color: #313131;
	
}
.formG11C .form-group .checkbox label, .formG11C .form-group .radio label, .formG11C .form-group label{color: #313131;}

.formG11C .input-group-addon .checkbox{
	padding:0px;
}
.formG11C .input-group .form-control{
	padding-top:0px;
	min-width: 80px;
}

.cusSumJob {
	width: 100%;
	clear: both;
}
.cusSumJob li {
	list-style: none;
	width: 49%;
	display: inline-block;
}
.cusSumJob li div.detail {
	width: 100%;
	padding: 10px;
	border: 3px solid rgba(199, 196, 192, 0.47);
	border-radius: 15px;
	text-align: center;
	color: #828282;
	font-weight: bold;
}
.pagination.pagination-sm {
	margin: 0 0 15px 0;
	float: right;
}
.pagination.pagination-sm li a {
	background-color: rgba(255, 255, 255, 0.54);
}
.pagination.pagination-sm li.active a {
	background-color: #337ab7;
}
.pagination.pagination-sm li a i.material-icons {
	line-height: 12px;
}
.pagination.pagination-sm li a.navPageIcon {
	padding-left: 5px;
	padding-right: 5px;
}
.modal-footer {
	border-top: 1px solid #e5e5e5 !important;
	padding: 15px 30px !important;
}
.searchChkinline {
	margin: 35px 0 0 0
}
.btn {
	padding: 5px 10px;
}
td .btn-group {
	margin: 0px;
}
#jobList td {
	text-align: center;
}
#jobList td:nth-of-type(4) {
	text-align: left;
}
#jobList td:nth-of-type(1) {
	width: 100px;
}
#jobList td:nth-of-type(2) {
	width: 120px;
}
#jobList td:nth-of-type(3),#jobList td:nth-of-type(5),#jobList td:nth-of-type(8)  {
	width: 60px;
}
#jobList td:nth-of-type(n+6):nth-of-type(-n+7) {
	width: 140px;
}
#jobList td:nth-of-type(8),#jobList td:nth-of-type(9)   {
	width: 100px;
}



.jobSumInfo {
	float: left;
	display: inline-block;
	border: 1px solid #999;
	height: 34px;
	line-height: 34px;
	padding: 0px 8px;
	border-radius: 5px;
	margin: 10px 5px;
}
.jobSumInfo:first-child {
	margin-left: 0px;
}
span.jobNameText {
	display: block;
	color: #a6a6a6;
}

.checkbox label, .radio label, label{color: #313131;}
.btn, .btn-group-vertical.btn-group-raised, .btn-group.btn-group-raised {
	box-shadow: none !important;
}
[data-toggle="buttons-radio"]>.btn>input[type="radio"] {
	display: none;
}
.btn-group label.btn .material-icons {
	font-size: 19px;
}
.margin0 {
	margin: 0px !important;
}
.padding0 {
	padding: 0px !important;
}
.paddingTop0 {
	padding-top: 0px !important;
}
.paddingleft0 {
	padding-left: 0px !important;
}
.form-horizontal .control-label {
	padding-top: 0px;
}

.text-primary{
	color:#3186a9;
}
.btn i.material-icons{
	font-size:17px;
}
.dateRangArea{
	display: inline-block;
}
.dateRangArea .form-control{
	width:49%;
}
.dateRangArea .form-control.endDate{
	margin-left: 5px;
}
.monthPicker .datepicker-inline{
	margin: auto !important;
	
}
.monthPicker .datepicker-inline .datepicker-months .table-condensed{
	width: 100%;
}

.monthPicker .datepicker-inline .datepicker-months .table-condensed tr td span {
	    border: 1px solid rgba(153, 153, 153, 0.24);
}

.modal { overflow: auto !important; }

.chkAndInput{
	
	margin-top:0px !important;
}
.chkAndInput .checkbox{
	padding: 0px;
}

.chkAndInput .form-control{
	margin: 0px;
}


select.form-control::before{
	
}

.ui.search.dropdown > .text{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	width: 100%;
}

/*--- CHOOSE ชนิดกระดาษ -----*/

.showChoosePaper{
	color:#0C654F;
	
}

/*--- END CHOOSE ชนิดกระดาษ ---*/





/*Dropdown Style*/

.ui.fluid.dropdown {
   width: auto;
   
}
.ui.dropdown .menu > .item {
	font-size: 1em;
}
/*End Dropdown Style*/


.form-control[readonly]{
	background-image: none;
	border-bottom: 1px dotted #D2D2D2;
	color:#999;
	cursor: not-allowed;
}
.is-focused .form-control[readonly]{
	background-image: none;
	border-bottom: 1px dotted #D2D2D2;
		
}


/* Close Btn In Panel*/

.closeInpanel{
	display: inline-block;
	margin: 0px;
	background-color:  #fff;
	padding:2px;
	line-height: 8px;
	vertical-align: middle;
	border-radius: 50%;
	border:none;
	color:#86080A;
	cursor: pointer;
}
.closeInpanel i{
	font-size: 16px;
}

.closeInpanel:hover{
	background-color:  rgba(255,255,255,0.7);
	
}

/* panel in panel*/
.panel-in-panel{
	box-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.1);
	margin:5px 0px;
}
.bigHeadlineInPanel{
	text-align: center;
	margin:5px 0px 0px 0px;
	font-size: 16px;
background-color: rgba(49, 134, 169, 0.24);
}
.detailAreaInPanel{
	padding: 25px;
border: 1px solid rgba(49, 134, 169, 0.24);
float: left;
}



.modalLoading{
	background-color: rgba(1, 1, 1, 0.49);
}

.modalLoading > .modal-dialog{
	height: calc(100% - 60px);
	display: table;
}
.modalLoading > .modal-dialog > .loadingImg{
	vertical-align: middle;
	display: table-cell;
	text-align: center;
	margin: auto;
}
.modalLoading > .modal-dialog > .loadingImg > p{
	margin-top:10px;
	color: rgba(255, 255, 255, 0.69);
}
.spinner {
  height: 120px;
  width: 120px;
  margin: 94px auto 0 auto;
  position: relative;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 14px solid rgba(0, 174, 239, .15);
  border-right: 14px solid rgba(0, 174, 239, .15);
  border-bottom: 14px solid rgba(0, 174, 239, .15);
  border-top: 14px solid rgba(0, 174, 239, .8);
  border-radius: 100%;
}