@import url("https://fonts.googleapis.com/css?family=Roboto|Trirong&subset=thai");
@font-face {
  font-family: "CSChatThai";
  src: url("../fonts/CSChatThai.eot?#iefix") format("embedded-opentype"), url("../fonts/CSChatThai.woff") format("woff"), url("../fonts/CSChatThai.ttf") format("truetype"), url("../fonts/CSChatThai.svg#CSChatThai") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* bootstrap variables */
body {
  font-family: "CSChatThai", "Trirong", sans-serif;
  font-size: 1.25rem;
}

h1, h2, h3 {
  text-align: center !important;
  margin-top: 10px;
}

#systemname h1 {
  font-size: 1.75rem;
}
#systemname br {
  line-height: 0;
}

h1 {
  font-size: 2.03125rem;
}

h2 {
  font-size: 1.875rem;
}

h3 {
  font-size: 1.71875rem;
}

h4 {
  font-size: 1.5625rem;
}

h5 {
  font-size: 1.40625rem;
}

h6 {
  font-size: 1.25rem;
}

#systemname {
  padding: 15px;
  padding-bottom: 20px;
  background: #022532;
  color: #d9dee0 !important;
  margin: 0;
}
#systemname a, #systemname a:link a:visited {
  color: #d9dee0 !important;
}

#pagefooter {
  background: #022E3F;
  color: #d9e0e2;
  margin-top: 10px;
  padding: 10px;
  margin-bottom: 0px;
}
#pagefooter p {
  margin: 0;
}

#errmsg, #infomsg {
  display: none;
}

#container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* nav bar */
.nav-bg {
  background: #022E3F;
  color: #d9e0e2 !important;
}
.nav-bg a, .nav-bg a:link a:visited {
  color: #d9e0e2 !important;
}
.nav-bg a.btn-default, .nav-bg a.btn-default:link, .nav-bg a.btn-default:visited {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #b63a4f !important;
}
.nav-bg a.btn-default:hover, .nav-bg a.btn-default:link:hover, .nav-bg a.btn-default:visited:hover {
  color: #231215 !important;
  background: #ea768a !important;
  border-color: #b63a4f !important;
}

.nav-item .dropdown-item:hover, .nav-item:hover {
  color: #e3e7e9 !important;
  text-decoration: none;
  background: #41626f;
}

.btn-default {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #b63a4f !important;
}
.btn-default:hover {
  color: #231215 !important;
  background: #ea768a !important;
  border-color: #b63a4f !important;
}

.input-group-addon {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #b63a4f !important;
}

/* table */
table thead tr {
  background-color: #988937;
  color: #f0ede1 !important;
}
table thead tr th {
  vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: white;
}

.table-striped tbody tr:nth-of-type(even) {
  background: #fee4ca;
}

.table-bordered {
  border: 1px solid #7a6e2c;
}

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th {
  border: 1px solid #7a6e2c;
}

.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
  border: 1px solid #7a6e2c;
}

/* badge */
.badge-default {
  color: #e0e6e5 !important;
  background: #2E584F !important;
  border-color: #2E584F !important;
}

/* card */
.card-default {
  color: #f0ede1 !important;
  background: #988937 !important;
  border-color: #988937 !important;
}

/* modal */
.modal-default {
  color: #f0ede1 !important;
  background: #988937 !important;
  border-color: #988937 !important;
}

/* popover */
.popover-default {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #E34863 !important;
}

/* tooltips */
.tooltip-default .tooltip-inner {
  background-color: #022E3F;
  color: #d9e0e2;
}
.tooltip-default.tooltip-top .tooltip-inner::before, .tooltip-default.bs-tether-element-attached-bottom .tooltip-inner::before {
  border-top-color: #022E3F;
}
.tooltip-default.tooltip-right .tooltip-inner::before, .tooltip-default.bs-tether-element-attached-left .tooltip-inner::before {
  border-right-color: #022E3F;
}
.tooltip-default.tooltip-bottom .tooltip-inner::before, .tooltip-default.bs-tether-element-attached-top .tooltip-inner::before {
  border-bottom-color: #022E3F;
}
.tooltip-default.tooltip-left .tooltip-inner::before, .tooltip-default.bs-tether-element-attached-right .tooltip-inner::before {
  border-left-color: #022E3F;
}
.tooltip-default.bs-tooltip-top .arrow::before {
  border-top-color: #022E3F;
}
.tooltip-default.bs-tooltip-right .arrow::before {
  border-top-color: #022E3F;
}
.tooltip-default.bs-tooltip-bottom .arrow::before {
  border-top-color: #022E3F;
}
.tooltip-default.bs-tooltip-left .arrow::before {
  border-top-color: #022E3F;
}

.tooltip-primary .tooltip-inner {
  background-color: #0275d8;
  color: #001220;
}
.tooltip-primary.tooltip-top .tooltip-inner::before, .tooltip-primary.bs-tether-element-attached-bottom .tooltip-inner::before {
  border-top-color: #0275d8;
}
.tooltip-primary.tooltip-right .tooltip-inner::before, .tooltip-primary.bs-tether-element-attached-left .tooltip-inner::before {
  border-right-color: #0275d8;
}
.tooltip-primary.tooltip-bottom .tooltip-inner::before, .tooltip-primary.bs-tether-element-attached-top .tooltip-inner::before {
  border-bottom-color: #0275d8;
}
.tooltip-primary.tooltip-left .tooltip-inner::before, .tooltip-primary.bs-tether-element-attached-right .tooltip-inner::before {
  border-left-color: #0275d8;
}
.tooltip-primary.bs-tooltip-top .arrow::before {
  border-top-color: #0275d8;
}
.tooltip-primary.bs-tooltip-right .arrow::before {
  border-top-color: #0275d8;
}
.tooltip-primary.bs-tooltip-bottom .arrow::before {
  border-top-color: #0275d8;
}
.tooltip-primary.bs-tooltip-left .arrow::before {
  border-top-color: #0275d8;
}

.tooltip-success .tooltip-inner {
  background-color: #5cb85c;
  color: #0e1c0e;
}
.tooltip-success.tooltip-top .tooltip-inner::before, .tooltip-success.bs-tether-element-attached-bottom .tooltip-inner::before {
  border-top-color: #5cb85c;
}
.tooltip-success.tooltip-right .tooltip-inner::before, .tooltip-success.bs-tether-element-attached-left .tooltip-inner::before {
  border-right-color: #5cb85c;
}
.tooltip-success.tooltip-bottom .tooltip-inner::before, .tooltip-success.bs-tether-element-attached-top .tooltip-inner::before {
  border-bottom-color: #5cb85c;
}
.tooltip-success.tooltip-left .tooltip-inner::before, .tooltip-success.bs-tether-element-attached-right .tooltip-inner::before {
  border-left-color: #5cb85c;
}
.tooltip-success.bs-tooltip-top .arrow::before {
  border-top-color: #5cb85c;
}
.tooltip-success.bs-tooltip-right .arrow::before {
  border-top-color: #5cb85c;
}
.tooltip-success.bs-tooltip-bottom .arrow::before {
  border-top-color: #5cb85c;
}
.tooltip-success.bs-tooltip-left .arrow::before {
  border-top-color: #5cb85c;
}

.tooltip-info .tooltip-inner {
  background-color: #5bc0de;
  color: #0e1d21;
}
.tooltip-info.tooltip-top .tooltip-inner::before, .tooltip-info.bs-tether-element-attached-bottom .tooltip-inner::before {
  border-top-color: #5bc0de;
}
.tooltip-info.tooltip-right .tooltip-inner::before, .tooltip-info.bs-tether-element-attached-left .tooltip-inner::before {
  border-right-color: #5bc0de;
}
.tooltip-info.tooltip-bottom .tooltip-inner::before, .tooltip-info.bs-tether-element-attached-top .tooltip-inner::before {
  border-bottom-color: #5bc0de;
}
.tooltip-info.tooltip-left .tooltip-inner::before, .tooltip-info.bs-tether-element-attached-right .tooltip-inner::before {
  border-left-color: #5bc0de;
}
.tooltip-info.bs-tooltip-top .arrow::before {
  border-top-color: #5bc0de;
}
.tooltip-info.bs-tooltip-right .arrow::before {
  border-top-color: #5bc0de;
}
.tooltip-info.bs-tooltip-bottom .arrow::before {
  border-top-color: #5bc0de;
}
.tooltip-info.bs-tooltip-left .arrow::before {
  border-top-color: #5bc0de;
}

.tooltip-warning .tooltip-inner {
  background-color: #f0ad4e;
  color: #241a0c;
}
.tooltip-warning.tooltip-top .tooltip-inner::before, .tooltip-warning.bs-tether-element-attached-bottom .tooltip-inner::before {
  border-top-color: #f0ad4e;
}
.tooltip-warning.tooltip-right .tooltip-inner::before, .tooltip-warning.bs-tether-element-attached-left .tooltip-inner::before {
  border-right-color: #f0ad4e;
}
.tooltip-warning.tooltip-bottom .tooltip-inner::before, .tooltip-warning.bs-tether-element-attached-top .tooltip-inner::before {
  border-bottom-color: #f0ad4e;
}
.tooltip-warning.tooltip-left .tooltip-inner::before, .tooltip-warning.bs-tether-element-attached-right .tooltip-inner::before {
  border-left-color: #f0ad4e;
}
.tooltip-warning.bs-tooltip-top .arrow::before {
  border-top-color: #f0ad4e;
}
.tooltip-warning.bs-tooltip-right .arrow::before {
  border-top-color: #f0ad4e;
}
.tooltip-warning.bs-tooltip-bottom .arrow::before {
  border-top-color: #f0ad4e;
}
.tooltip-warning.bs-tooltip-left .arrow::before {
  border-top-color: #f0ad4e;
}

.tooltip-danger .tooltip-inner {
  background-color: #d9534f;
  color: #f9e5e5;
}
.tooltip-danger.tooltip-top .tooltip-inner::before, .tooltip-danger.bs-tether-element-attached-bottom .tooltip-inner::before {
  border-top-color: #d9534f;
}
.tooltip-danger.tooltip-right .tooltip-inner::before, .tooltip-danger.bs-tether-element-attached-left .tooltip-inner::before {
  border-right-color: #d9534f;
}
.tooltip-danger.tooltip-bottom .tooltip-inner::before, .tooltip-danger.bs-tether-element-attached-top .tooltip-inner::before {
  border-bottom-color: #d9534f;
}
.tooltip-danger.tooltip-left .tooltip-inner::before, .tooltip-danger.bs-tether-element-attached-right .tooltip-inner::before {
  border-left-color: #d9534f;
}
.tooltip-danger.bs-tooltip-top .arrow::before {
  border-top-color: #d9534f;
}
.tooltip-danger.bs-tooltip-right .arrow::before {
  border-top-color: #d9534f;
}
.tooltip-danger.bs-tooltip-bottom .arrow::before {
  border-top-color: #d9534f;
}
.tooltip-danger.bs-tooltip-left .arrow::before {
  border-top-color: #d9534f;
}

.nav-tabs {
  color: #1f1d17 !important;
  background: #ccc49b !important;
  border-color: #ccc49b !important;
}
.nav-tabs .nav-item a, .nav-tabs .nav-item a:link a:visited {
  color: #1f1d17;
}
.nav-tabs .nav-item .active {
  color: #f0ede1 !important;
  background: #988937 !important;
  border-color: #7a6e2c !important;
}
.nav-tabs .nav-link:hover {
  color: #e0e6e5 !important;
  background: #2E584F !important;
  border-color: #25463f !important;
}

.secondary {
  margin-left: 20px;
  margin-right: 20px;
  color: #262019 !important;
  background: #fed2a7 !important;
  border-color: #fed2a7 !important;
}
.secondary .nav-item a, .secondary .nav-item a:link a:visited {
  color: #262019;
}
.secondary .nav-item .active {
  color: #26190c !important;
  background: #FDA54E !important;
  border-color: #ca843e !important;
}
.secondary .nav-link:hover {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #b63a4f !important;
}

/* custom color component */
/* button */
.btn-custom-1 {
  color: #d9e0e2 !important;
  background: #022E3F !important;
  border-color: #022532 !important;
}
.btn-custom-1:hover {
  color: #e3e7e9 !important;
  background: #41626f !important;
  border-color: #022532 !important;
}

/* background */
.bg-custom-1 {
  color: #d9e0e2 !important;
  background: #022E3F !important;
  border-color: #022532 !important;
}

/* button */
.btn-custom-2 {
  color: #e0e6e5 !important;
  background: #2E584F !important;
  border-color: #25463f !important;
}
.btn-custom-2:hover {
  color: #e7eceb !important;
  background: #62827b !important;
  border-color: #25463f !important;
}

/* background */
.bg-custom-2 {
  color: #e0e6e5 !important;
  background: #2E584F !important;
  border-color: #25463f !important;
}

/* button */
.btn-custom-3 {
  color: #f0ede1 !important;
  background: #988937 !important;
  border-color: #7a6e2c !important;
}
.btn-custom-3:hover {
  color: #1b1910 !important;
  background: #b2a769 !important;
  border-color: #7a6e2c !important;
}

/* background */
.bg-custom-3 {
  color: #f0ede1 !important;
  background: #988937 !important;
  border-color: #7a6e2c !important;
}

/* button */
.btn-custom-4 {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #b63a4f !important;
}
.btn-custom-4:hover {
  color: #231215 !important;
  background: #ea768a !important;
  border-color: #b63a4f !important;
}

/* background */
.bg-custom-4 {
  color: #fbe4e8 !important;
  background: #E34863 !important;
  border-color: #b63a4f !important;
}

/* button */
.btn-custom-5 {
  color: #26190c !important;
  background: #FDA54E !important;
  border-color: #ca843e !important;
}
.btn-custom-5:hover {
  color: #261c12 !important;
  background: #febc7a !important;
  border-color: #ca843e !important;
}

/* background */
.bg-custom-5 {
  color: #26190c !important;
  background: #FDA54E !important;
  border-color: #ca843e !important;
}

.bg-procure {
  color: #24191b !important;
  background: #f1a4b1 !important;
  border-color: #b63a4f !important;
}

.bg-staff {
  color: #262019 !important;
  background: #fed2a7 !important;
  border-color: #ca843e !important;
}

.input-group-btn:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
  height: 100%;
}

.clickable {
  cursor: pointer;
}

.skiptop {
  margin-top: 20px;
}

.badge {
  font-size: 90% !important;
}

.dropdown-menu {
  font-size: 1.25rem !important;
}

input, select {
  font-family: "CSChatThai", "Trirong", sans-serif !important;
  font-size: 1.25rem;
}

button {
  cursor: pointer;
}

/*# sourceMappingURL=starter.css.map */