@font-face {
  font-family: 'Sarabun';
  src: url('../vendor/Google-Fonts/sarabun/Sarabun-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Sarabun';
  src: url('../vendor/Google-Fonts/sarabun/Sarabun-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
/***********************/
body {
  padding: 0px;
  margin: 0px;
  font-family: 'Sarabun', sans-serif;
  background-color: rgb(30, 152, 147);
}
.flex {
  display: flex;
}
div.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -99;
  display: none;
}
.bg > .bg-top {
  height: 30%;
  width: 100%;
  background-color: rgb(9, 169, 175);
}
.bg > .bg-bottom {
  height: 70%;
  width: 100%;
  background-color: rgb(73, 181, 185);
}
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
  margin-bottom: 100px;
}
.menu-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.article-container {

}
/***********/
.admin-detail {
  width: 100%;
  background-color: rgb(60,60,60);
  position: relative;
}
.admin-image {
  display: none;
}
.admin-name {
  line-height: 40px;
  height: 40px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.menu-hamberger {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 4px;
  line-height: 40px;
  color: rgb(200,200,200);
  text-align: center;
  font-size: 18px;
  user-select: none;
}
.menu-bar {
  padding-top: 10px;
  background-color: rgb(70,70,70);
  display: none;
}
.menu-bar-active {
  display: block;
}
ul.menu-bar-container {
  padding: 0px;
  list-style: none;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: rgb(13, 29, 79);
  margin: 0px;
}
ul.menu-bar-container > li {
  box-sizing: border-box;
}
ul.menu-bar-container > li > a {
  display: block;
  height: 35px;
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  color: rgb(245,245,245);
  line-height: 35px;
}
ul.menu-bar-container > li > a:hover {
  background-color: rgba(200,200,200,0.3);
}
.menu-bar-icon {
  width: 25px;
  display: inline-block;
  height: inherit;
  text-align: center;
}
.menu-bar-label {
  box-sizing: border-box;
  padding-left: 5px;
  height: inherit;
  display: inline-block;
  width: calc(100% - 25px);
}
table {
  width: 100%;
  border-collapse: collapse;

}









/*****************/
ul.table-farmer-list-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0px;
  list-style: none;
  margin: 0px;
  box-sizing: border-box;
}
ul.table-farmer-list-header > li {
  padding: 0px;
  display: flex;
  background-color: rgb(70, 70, 89);
  box-sizing: border-box;
}
ul.table-farmer-list-header > li:nth-child(1) {
  flex-basis: 25%;
}
ul.table-farmer-list-header > li:nth-child(2) {
  flex-basis: 75%;
}
ul.table-farmer-list-header > li:nth-child(3) {
  flex-basis: calc(85% / 3);
}
ul.table-farmer-list-header > li:nth-child(4) {
  flex-basis: calc(85% / 3);
}
ul.table-farmer-list-header > li:nth-child(5) {
  flex-basis: calc(85% / 3);
}
ul.table-farmer-list-header > li:nth-child(6) {
  flex-basis: 15%;
}
.sort-icon {
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.sort-icon > i {
  width: 20px;
  text-align: center;
  color: rgb(100,100,100);

}
.sort-icon > i.active {
  color: rgb(180,180,180);
}
.li-col.input-container {
  width: calc(100% - 20px);
}
table.table-farmer-list {
  border-collapse: collapse;
  width: 100%;
  display: table;
}
.table-farmer {
  border-collapse: collapse;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.table-farmer > .table-farmer-tr {

}
.table-farmer > .table-farmer-tr > a:hover {
  background-color: rgba(200,200,200,0.3);
}
.table-farmer > .table-farmer-tr > a {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
}
.table-farmer > .table-farmer-tr > a > div {
  color: rgb(100,100,100);
  font-size: 14px;
  padding: 5px;
  box-sizing: border-box;
  word-wrap: break-word;

}
.table-farmer > .table-farmer-tr > a > div:nth-child(1) {
  width: 18%;
  text-align: left;
}
.table-farmer > .table-farmer-tr > a > div:nth-child(2) {
  width: 35%;
  text-align: left;
}
.table-farmer > .table-farmer-tr > a > div:nth-child(3) {
  width: 17%;
  text-align: right;
}
.table-farmer > .table-farmer-tr > a > div:nth-child(4) {
  text-align: left;
  width: 30%
}
.table-farmer > .table-farmer-tr:nth-child(odd) {
  background-color: rgb(250,250,250);
}
.table-farmer > .table-farmer-tr:nth-child(even) {
  background-color: rgb(240,240,240);
}



.table-spinner {
  width: 35px;
  height: 35px;
  display: block;
  margin: 3px auto;
  filter: invert(1) contrast(20%);
}
table.table-farmer-list td {
  color: rgb(100,100,100);
  font-size: 14px;
  padding: 5px;
}
table.table-farmer-list tr:nth-child(odd) {
  background-color: rgb(250,250,250);
}
table.table-farmer-list tr:nth-child(even) {
  background-color: rgb(240,240,240);
}
table.table-farmer-list td:nth-child(1) {
  width: 20%;
}
table.table-farmer-list td:nth-child(2) {
  width: 50%;
}
table.table-farmer-list td:nth-child(3) {
  display: none;
}
table.table-farmer-list td:nth-child(4) {
  display: none;
}
table.table-farmer-list td:nth-child(5) {
  padding: 5px 20px;
}
.farmer-edit-icon {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 13px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  float: right;
}
.farmer-edit-icon {
  background-color :rgb(180,180,180);
  color: #fff;
}

.farmer-search-button {
  outline: none;
  border: none;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Sarabun';
  color: #fff;
  background-color: rgb(50, 50, 80);
  cursor: pointer;
}
.farmer-search-input {
  border: none;
  outline: none;
  background-color: rgb(70, 70, 89);
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 0px 5px;
  line-height: 3em;
  font-family: 'Sarabun';
  color: #fff;
}
.farmer-search-select {
  border: none;
  outline: none;
  background-color: rgb(70, 70, 89);
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Sarabun';
  color: #fff;
}
.farmer-search-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(180,180,180);
  opacity: 1; /* Firefox */
}

.farmer-search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(180,180,180);
}

.farmer-search-input::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(180,180,180);
}
/******/

.farmer-pagination {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.farmer-pagination > button, .farmer-pagination > select {
  height: 30px;
  width: 40px;
  line-height: 30px;
  cursor: pointer;
  outline: none;
  background-color: rgb(230,230,230);
  border: thin solid rgb(220,220,220);
  border-radius: 3px;
  text-align: center;
  margin: 0px 2px;
  font-family: 'Sarabun';
  padding: 0px;
  font-size: 13px;
}
.farmer-pagination > select {
  text-align-last:center;
}
#number_of_row {
  width: 65px;
}
#page_selector {
  width: 90px;
}
.farmer-pagination-total-row {
  height: 30px;
  line-height: 30px;
  color: rgba(230,230,230, 0.6);
  font-size: 13px;
  margin-left: 5px;
}
/*********************************************************/
/*********************************************************/
ul.cost-list-menu {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
ul.cost-list-menu > li {
  list-style: none;
  height: 40px;
  line-height: 40px;
  min-width: 80px;
  font-size: 13px;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: rgba(220,220,220,0.5);
  color: rgb(250,250,250,0.9);
  cursor: pointer;
  transition: 0.1s;
  padding: 0px 10px;
}
ul.cost-list-menu > li:not(.active):hover {
  transform: translateY(3px);
}
ul.cost-list-menu > li.active {
  background-color: #fff;
  color: #009297;
}

/****/
.cost-list-container, .cost-list-unit-container {
  background-color: #fff;
  min-height: 200px;
  padding: 20px 5px;
  box-sizing: border-box;
}
.cost-list-input {
  border: thin solid rgba(210,210,210, 1);
  height: 32px;
  padding: 0px 5px;
  font-family: 'Sarabun';
  line-height: 3;
  color: rgb(30,30,30);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.cost-list-select {
  border: thin solid rgba(210,210,210, 1);
  height: 32px;
  padding: 0px 5px;
  font-family: 'Sarabun';
  line-height: 3;
  color: rgb(30,30,30);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.cost-list-input:focus, .cost-list-select:focus {
  border-color: rgb(12, 187, 12);
  box-shadow: 0px 0px 1px 1px rgba(12, 187, 12, 0.5);
}
.cost-category-container {
  display: flex;
  flex-direction: column;
}
.cost-category-row {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.cost-category-row.ctgr-row {
  background-color: rgb(230, 230, 230);
}
.cost-category-row > div {
  box-sizing: border-box;
  padding: 5px 4px;
}
.cost-category-row.ctgr-row > .cost-category-col-number {
  flex-basis: 30px;
  font-size: 14px;
  line-height: 32px;
  padding-right: 5px;
  text-align: right;
  color: rgb(100, 100, 100);
}
.cost-category-row.ctgr-row > .cost-category-col-input > .cost-list-input,
.cost-category-row.ctgr-row > .cost-category-col-input-note > .cost-list-input {

}
.cost-category-row.lst-row > .cost-category-col-number {
  display: none;
}
.cost-category-row.lst-row > .cost-category-col-input {
  flex-basis: 100%;
}
.cost-category-row > .cost-category-col-input {
  flex-basis: calc(100% - 35px);
}
.cost-category-row > .cost-category-col-unit {
  flex-basis: 28%;
}
.cost-category-row > .cost-category-col-input-note {
  flex-basis: 50%;
}
.cost-category-row > .cost-category-col-btn {

}
.cost-category-row.lst-row {
  /*background-color: rgb(245,245,245);*/
}
/*********/
.table-cost-unit {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
  color: rgb(30,30,30);
}
.table-cost-unit  tr  th {
  background-color: rgb(228, 228, 235);
  padding: 5px 10px;
  border-top: 1px solid rgba(200,200,200,1);
  border-bottom: 1px solid rgba(200,200,200,1);
  text-align: left;
}
.table-cost-unit  tr  td {
  padding: 5px 4px;
}
.table-cost-unit  tr:nth-child(odd)  td {
  background-color: rgb(230, 230, 230);
}
.table-cost-unit  tr th:nth-child(1),
.table-cost-unit  tr td:nth-child(1) {
  width: 15%;
  text-align: center;
}
.table-cost-unit  tr td:nth-child(2) {
  width: 65%;
}
.table-cost-unit  tr td:nth-child(3) {

}
.cost-category-btn {
  border-radius: 3px;
  box-sizing: border-box;
  min-width: 30px;
  height: 30px;
  border: none;
  outline: none;
  color: #fff;
  line-height: 30px;
  cursor: pointer;
  vertical-align: bottom;
  font-family: 'sarabun';
}
.cost-category-btn.save {
  background-color: rgb(32, 208, 38);
  display: none;
}
.cost-category-btn.delete {
  background-color: rgb(215, 62, 62);
  display: none;
}
/********************************************************************/
.table-cost-input-bar {
  background-color: rgb(70, 70, 89);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.cost_input_rai {
  display: flex;
  flex-direction: row;
}
.cost_input_rai .cost_input_rai_label {
  font-size: 13px;
  color: rgb(184, 184, 199);
  line-height: 40px;
  padding-left: 20px;
  padding-right: 10px;
}
.cost_input_rai > .cost_input_rai_input > input[type="text"] {
  height: 100%;

  box-sizing: border-box;
  border: none;
  background-color: rgba(89, 89, 111,0.9);
  text-align: center;
  line-height: 100%;
  padding: 0px 5px;
  color: rgb(230,230,230);
  font-size: 14px;
  font-family: 'Sarabun';
}
.cost_input_rai > .cost_input_rai_input > input[name="cost_input_rai"] {
    width: 70px;
}
.cost_input_rai > .cost_input_rai_input > input[name="cost_input_date"] {
    width: 100px;
}
.cost_input_rai > .cost_input_rai_input > input[type="text"]::placeholder {
  font-size: 13px;
  color: rgba(147, 147, 172,1)
}
.cost_input_bar_history {
  display: flex;
  line-height: 40px;
  font-size: 12px;
  text-decoration: underline;
  padding: 0px 5px;
}
.cost_input_bar_history > a {
  color: rgb(200,200,200);
}
.cost_input_bar_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cost_input_bar_btn > button {
  height: 40px;
  width: 80px;
  box-sizing: border-box;
  border: none;
  font-size: 13px;
  color: rgb(230,230,230);
  font-family: 'Sarabun';
  cursor: pointer;
  outline: none;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.cost_input_bar_btn > .cost_input_bar_dataid {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  user-select: none;
}
.cost_input_bar_btn > .cost_input_bar_dataid >
  .cibd_id {
  padding: 0px 8px;
  box-sizing: border-box;
  color: #dc0000;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 25px;
  line-height: 25px;
}
.cost_input_bar_btn > .cost_input_bar_dataid >
  .cibd_reset {
  padding: 0px 8px;
  box-sizing: border-box;
  background-color: #ca0202;
  color: #fff;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 25px;
  line-height: 25px;
}
#cost_input_save {
  background-color: #3c7718;
}
#cost_input_export {
  background-color: #61432d;
  cursor: not-allowed;
}
.cost_input_bar_btn > button > i {
  margin-right: 6px;
  font-size: 14px;
}














.table-cost-input-container {
  overflow-x: scroll;
  background-color: rgb(250,250,250);
  box-sizing: border-box;
}

table.table-cost-input {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  box-sizing: border-box;
  min-width: 750px;
}
.table-cost-input tr {

}
.table-cost-input tr th{
  font-size: 12px;
  font-weight: 400;
  padding: 15px 0px;
  background-color: rgba(50,50,50,0.8);
  color: rgb(240,240,240);
}
tr.tr_category td {
  background-color: rgb(230,230,230);
}
.table-cost-input tr td{
  padding: 8px 8px;
  box-sizing: border-box;

}
.table-cost-input tr td:first-child,
.table-cost-input tr th:first-child {
  width: 6%;
}
.table-cost-input tr td:nth-child(2),
.table-cost-input tr th:nth-child(2) {

}
.table-cost-input tr td:nth-child(3),
.table-cost-input tr th:nth-child(3) {
  width: 9%;
}
.table-cost-input tr td:nth-child(4),
.table-cost-input tr th:nth-child(4) {
  width: 7%;
}
.table-cost-input tr td:nth-child(5),
.table-cost-input tr th:nth-child(5) {
  width: 10%;
}
.table-cost-input tr td:nth-child(6),
.table-cost-input tr th:nth-child(6) {
  width: 10%;
}
.table-cost-input tr td:nth-child(7),
.table-cost-input tr th:nth-child(7) {
  width: 9%;
}
.table-cost-input tr td:nth-child(8),
.table-cost-input tr th:nth-child(8) {
  width: 6%;
}
.table-cost-input tr td:nth-child(9),
.table-cost-input tr th:nth-child(9) {
  width: 10%;
}
.table-cost-input tr td:nth-child(10),
.table-cost-input tr th:nth-child(10) {
  width: 6%;
}
.table-cost-input tr td:first-child {
  text-align: right;
}
.tr_category_ghost, .tr_list_ghost {
  display: none;
}


.table-cost-input tr:not(:first-child) td {
  /*border-top: 1px solid rgb(200,200,200);*/
}
.cost_input_form {
  box-sizing: border-box;
  height: 34px;
  width: 100%;
  outline: none;
  border: 1px solid rgb(210,210,210);
  padding: 0px 5px;
  line-height: 34px;
  font-family: 'Sarabun';
  text-align: right;
}

.category, .cost_data_list {
  text-align: left;
}
.cost_input_form:focus:not([name="data_total_price[]"]):not(.cost_data_list_unit):not(.cost_data_list):not(.category):not(.data_price_per_rai) {
  border-color: rgb(12, 187, 12);
  box-shadow: 0px 0px 1px 1px rgba(12, 187, 12, 0.5);
}
.cost_data_list_unit {
  text-align: center !important;
}
.cost_input_form::-webkit-input-placeholder {
  font-size: 12px;
}
.cost_input_form:-moz-placeholder {
  font-size: 12px;
}
.cost_input_form::-moz-placeholder {
  font-size: 12px;
}
.time_unit {
  min-width: 62px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  margin: 0;
}
.cost_input_btn {
  font-size: 20px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  display: inline-block;

}
.cost_input_btn i:active {
  transform: scale(0.95);
}
.btn_add {
  color: #0ec914;
}
.btn_delete {
  color: #e40a0a;
}
.cost_input_foot_bar {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 20px;
  justify-content: center;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.cost_input_btn_add_ctg {
  width: 130px;
  height: 25px;
  border: 1px solid #fff;
  border-radius: 3px;
  background-color: #0c7a75;
  cursor: pointer;
  font-family: 'Sarabun';
  color: #fff;
  font-size: 12px;
  outline: none;
}
.cost_input_btn_add_ctg:hover {
  background-color: #268d89;
}
.btn_add {
  margin-left: 5px;
}

/***************************************/

.content_container {
  padding: 10px;
  background-color: #fff;
  position: relative;
}
.form_section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: space-between;
}
.form_row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  flex-basis: calc(100%);
}
.rowW1 {
  flex-basis: calc(50% - 10px);
}
.rowW2 {
  flex-basis: calc(50% - 10px);
}
.rowW3 {

}
.form_row_submit {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.form_row_title {
  font-size: 14px;
  color: rgb(70,70,70);
  height: 22px;
  line-height: 22px;
  margin-bottom: 3px;
}
.form_row_input {
  display: flex;
  flex-direction: row;
}
.form_input {
  box-sizing: border-box;
  height: 34px;
  width: 100%;
  outline: none;
  border: 1px solid rgb(210,210,210);
  padding: 0px 5px;
  line-height: 34px;
  font-family: 'Sarabun';
  background-color: rgba(0,0,0,0);
}
.form_input.select {

}
.form_input:not(:read-only):focus {
  border-color: rgb(12, 187, 12);
  box-shadow: 0px 0px 1px 1px rgba(12, 187, 12, 0.5);
}
input.form_input:read-only {
  background-color: rgba(200,200,200,0.2);
}
.input_unit {
  display: flex;
}
.input_unit > input {
  padding-right: 30px;
  text-align: right;
}
.input_unit > span {
  margin-left: -25px;
  font-size: 13px;
  line-height: 36px;
  height: 34px;
  color: rgb(180,180,180);
}
.files_input {
  display: none;
}
.files_input_label {
  display: block;
  box-sizing: border-box;
  width: 80px;
  height: 34px;
  padding: 0px 3px;
  border: thin solid rgb(200,200,200);
  font-size: 12px;
  text-align: center;
  line-height: 34px;
  background-color: rgba(150,150,150,0.2);
  color: rgb(100,100,100);
  cursor: pointer;

}
.files_input_label:hover {
  background-color: rgb(150,150,150);
  border-color: rgb(150,150,150);
  color: rgb(245,245,245);
}
.file_input_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 34px;
  font-size: 13px;
  color: rgb(70,70,70);
  padding: 0px 5px;
  padding-right: 30px;
  text-decoration: underline;
  display: none;
  position: relative;
  max-width: 50vw;
}
.file_input_name a {
  color: #003664;
}
.file_input_name .close {
  width: 15px;
  height: 15px;
  line-height: 15px;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: 8px;
  right: 0;
  cursor: pointer;
  user-select: none;
}
็h1, h2, h3, h4, h5, h6 {
  color: rgb(70,70,70);
  margin: 15px 0px;
}
hr {
  border: none;
  height: 5px;
  background-color: rgb(30, 152, 147);
  margin-bottom: 20px;
  margin-top: 5px;
}
hr.cut-section {
  margin: 20px auto;
  height: 2px;
  width: 80%;
}
.page-title {
  font-weight: 600;
  font-size: 0.9em;
  color: rgb(70,70,70);
  line-height: 25px;
  display: flex;
  flex-wrap: wrap;
}
/********/
table.table-damage-list {
  border-collapse: collapse;
  width: 100%;
}
.table-damage-list th {
  padding: 5px 5px;
  font-size: 13px;
  text-align: left;
}
.table-damage-list td {
  font-size: 14px;
  padding: 6px 5px;
  border-top: 1px solid rgb(200,200,200);
}
.table-damage-list td:nth-child(1) {
  width: 8%;
}
.table-damage-list td:nth-child(3) {
  width: 25%;
}
.table-damage-list td:nth-child(4) {
  width: 12%;
}
.circle_btn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 25px;
  color: #fff;
  text-align: center;
  cursor: pointer;

}
.circle_btn:hover i {
  transform: scale(1.2);
}
.circle_btn.delete {
  background-color: rgb(228, 10, 10);
}
.circle_btn.add {
  background-color: rgb(34, 195, 15);
}
/**********/
.rain_dm_lv_lst_container {
  border-radius: 3px;
  border: 1px solid rgb(210,210,210);
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  padding: 2px 5px;
}
.rain_dm_lv_lst_container > .list {
  width: 100%;
  border-collapse: separate;
  font-size: 14px;
  box-sizing: border-box;
  border-spacing: 0 3px;
}
.rain_dm_lv_lst_container .list tr {
  padding: 5px;
}
.rain_dm_lv_lst_container .list td {
  box-sizing: border-box;
  padding: 5px;
}
.rain_dm_lv_lst_container .list td:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.rain_dm_lv_lst_container .list td:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.rain_dm_lv_lst_container .list tr td {
  background-color: rgba(255, 174, 129, 0.3);
}
.rain_dm_lv_lst_container .list td:nth-child(1) {
  width: 15%;
}
.rain_dm_lv_lst_container .list td:nth-child(3) {
  width: 23%;
  font-weight: bold;
  text-align: right;
  color: #16335f;
}
/**************************************************/

.history_container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 470px;
  background: rgba(26, 25, 47, 0.9);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
  z-index: 1000;
  margin: auto;
  margin-top: 100px;
  box-sizing: border-box;
  color: #fff;
  display: none;
  backdrop-filter: blur(3px);
}
.history_container.W1 {
  max-width: 580px;
}
.history_container > .hc_title {
  padding: 20px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid rgb(180,180,180);
  position: relative;
  height: 50px;
  box-sizing: border-box;
}
.history_container > .hc_title > .hc_close {
  position: absolute;
  top: -8px;
  right: 0;
  width: 35px;
  height: 25px;
  background-color: rgb(148, 36, 36);
  border-radius: 3px;
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
  cursor: pointer;
}
.history_container > .hc_title > .hc_close::before {
  display: block;
  content: "×";
  width: 35px;
  height: 25px;
  line-height: 20px;
  font-size: 1.4em;
  text-align: center;
}
/********/
.hc_table_container {
  overflow-y: auto;
  padding-top: 20px;
  box-sizing: border-box;
  margin-bottom: 5px;
  height: 80vh;
  position: relative;
}
.hc_table_container::-webkit-scrollbar {
  width: 8px;

}
/* Track */
.hc_table_container::-webkit-scrollbar-track {
  background: rgba(150,150,150,0.5);
}

/* Handle */
.hc_table_container::-webkit-scrollbar-thumb {
  background: rgba(230, 230, 230, 1);
  border-radius: 4px;
}
/*******/
.history_container .hc_cost-input {
  width: 100%;
  border-collapse: collapse;
}
.toSort {
  cursor: pointer;
  user-select: none;
}
.history_container table thead td {
  font-size: 13px;
  color: rgb(200,200,200);
  padding: 8px 0px;
  box-sizing: border-box;
  text-align: center;
}
.history_container table tbody td {
  padding: 7px 3px;
  box-sizing: border-box;
  font-size: 14px;
}

.history_container .hc_cost-input td:nth-child(1) {
  width: 30%;
  text-align: center;
}
.history_container .hc_cost-input td:nth-child(2) {
  text-align: center;
}
.history_container .hc_cost-input td:nth-child(3) {
  width: 40%;
  padding-right: 20px;
  text-align: right;
  box-sizing: border-box;
}
.history_container table td a {
  color: #2fc8d9;
}

.history-link {
  color: rgb(150,150,150);
  font-size: 12px;
  font-weight: normal;
  margin-left: 10px;
  margin-right: 10px;
}

.hc_raindamage td:nth-child(1) {
  width: 23%;
  text-align: center;
}
.hc_raindamage td:nth-child(2) {
  text-align: left;
  word-break: break-all;
}
.hc_raindamage td:nth-child(3) {
  width: 30%;
  padding-right: 20px;
  text-align: right;
}

/***/
.hc_rain tbody td, .hc_rain thead td{
  padding: 7px 5px !important;
}
.hc_rain td:nth-child(1) {
  width: 20%;
  text-align: center;
}
.hc_rain td:nth-child(2) {
  text-align: left;
  width: 37%;
}
.hc_rain td:nth-child(3) {
  text-align: left;
}
.bar_dataid {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  user-select: none;

}
.bar_dataid > .id {
  padding: 0px 8px;
  box-sizing: border-box;
  color: #dc0000;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 25px;
  line-height: 25px;
  border: 1px solid #dc0000;
}
.bar_dataid > .reset {
  padding: 0px 8px;
  box-sizing: border-box;
  background-color: #ca0202;
  color: #fff;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 25px;
  line-height: 25px;
}
/*************************************************/

.manageuser_container {
  width: 100%;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.manageuser_container > .user_list {
  flex-basis: 30%;

}
.manageuser_container > .page_list {
  flex-basis: 70%;
  border: 1px solid rgb(200,200,200);
  border-radius: 3px;
  position: relative;
}
.manageuser_container > .user_list ul {
  list-style: none;
  padding: 10px 0px;
  margin: 0px;
}
.manageuser_container > .user_list ul > li {
  color: rgb(0, 141, 76);
  font-size: 14px;
  line-height: 38px;
  height: 38px;
  box-sizing: border-box;
  padding-left:20px;
  cursor: pointer;
  user-select: none;
  border: 1px solid;
  border-radius: 3px;
  margin-bottom: 5px;
  border-color: rgb(0, 141, 76);
  background-color: rgb(213, 241, 228);
}
.manageuser_container > .user_list > ul > li:hover {
  background-color: rgb(132, 215, 176);
}
.manageuser_container > .user_list > ul > li.selected {
  background-color: rgb(0, 166, 90);
  border-color: rgb(0, 141, 76);
  color: #fff;

}
.manageuser_container > .user_list .title {
  font-size: 13px;
  font-weight: bold;
  color: rgb(60,60,60);
}
.manageuser_container table.tb_page_list {
  border-collapse: collapse;
  font-size: 14px;
  color: rgb(60,60,60);
}
.manageuser_container table.tb_page_list td {
  box-sizing: border-box;
  padding: 6px 4px;
}
.manageuser_container table.tb_page_list tr:nth-child(odd) td {
  background-color: rgba(150,150,150,0.1);
}
.manageuser_container table.tb_page_list td:nth-child(1) {
  text-align: right;
  padding-right: 10px;
  width: 10%;
}
.manageuser_container table.tb_page_list td:nth-child(2) {
  font-weight: bold;
}
.manageuser_container table.tb_page_list td:nth-child(3) {
  width: 15%;
}
.manageuser_container table.tb_page_list td:nth-child(4) {
  width: 40%;
}
.manageuser_container table.tb_page_list #new_pwd {
  height: 33px;
  box-sizing: border-box;
  padding: 0px 4px;
  border-radius: 3px;
  border: 1px solid rgb(200,200,200);
  width: 90%;
  font-size: 14px;
  line-height: 33px;
  font-family: 'Sarabun';
}
.manageuser_container .page_list_spinner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(200,200,200,0.6);
  z-index: 9;
  padding-top: 40%;
  display: none;
}
.manageuser_container .page_list_spinner .spinner_style_2 {
  margin-top: 0px;
}
.manageuser_row_btn {
  width: 100%;
  max-width: 750px;
  display: flex;
  flex-direction: row;
  margin: auto;
  margin-top: 10px;
  justify-content: flex-end;
}
.manageuser_row_btn button {
  height: 33px;
  width: 130px;
  text-align: center;
  border-radius: 3px;
  background-color: rgba(112, 199, 192, 0);
  border: thin solid rgb(112, 199, 192);
  cursor: pointer;
  font-weight: bold;
  color: rgb(112, 199, 192);
  outline: none;
  font-family: 'Sarabun';
}
.manageuser_row_btn button:hover {
  background-color: rgba(112, 199, 192, 0.1);
}









/**************************************************/
.select-custom-1 {
  position: relative;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background-color: #3b78b6;
  display: flex;
  line-height: 33px;
  color: #fff;

}
.select-custom-1 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  width: 100%;
  height: 33px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background-color: #3b78b6;
  color: #fff;
  padding: 0px 5px;
  font-family: 'Sarabun';
  line-height: 33px;
  flex: 1;
  cursor: pointer;
}
.select-custom-1::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  font-size: 13px;
  padding: 0 10px;;
  background: #34495e;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
.select-custom-1 select::-ms-expand {
  display: none;
}
/***************************************************/
input[type="checkbox"].checkbox-style-1 {
  position: relative;
  margin: 0 10px;
  border-radius: 20px;
  background: #d92626;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
  width: 36px;
  height: 20px;
  vertical-align: middle;
}

input[type="checkbox"].checkbox-style-1::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: calc((100% - 4px) / 2);
  height: calc(100% - 4px);
  border-radius: 50%;
  background: #eee;
  transition: all .1s linear;
}

input[type="checkbox"].checkbox-style-1:checked {
  background: #5b5;
}

input[type="checkbox"].checkbox-style-1:checked::after {
  transform: translateX(100%);
}
/* END checkbox style */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgb(200,200,200);
	font-size: 13px;
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgb(200,200,200);
	font-size: 13px;
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgb(200,200,200);
	font-size: 13px;
}
:-moz-placeholder { /* Firefox 18- */
  color: rgb(200,200,200);
	font-size: 13px;
}
/*************************************************/
.min992_hide {
  display: none;
}
.default_btn {
  min-width: 80px;
  height: 32px;
  border-radius: 3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  font-family: 'Sarabun';
  cursor: pointer;
  font-weight: bold;
  color: rgb(112, 199, 192);
  outline: none;
  padding: 0px 5px;
  box-sizing: border-box;
  font-size: 0.8em;
}
.default_btn.save_btn {
  width: 120px;
  border: thin solid rgb(112, 199, 192);
  color:  rgb(112, 199, 192);
}
.default_btn.save_btn:hover {
  background-color: rgba(112, 199, 192, 0.1);
}

textarea {
  width: 100%;
  max-width: 400px;
  height: 100px;
  border: thin solid rgb(200,200,200);
  border-radius: 3px;
  resize: none;
  padding: 7px;;
  font-family: 'Sarabun';
  font-size: 14px;
  outline: none;
}
textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 14px;
}
textarea:not(:read-only):focus {
  border-color: rgb(12, 187, 12);
  box-shadow: 0px 0px 1px 1px rgba(12, 187, 12, 0.5);
}

/*****************************/
.input-error {
  border-color: rgba(230, 28, 28, 0.8);
  box-shadow: 0px 0px 3px 1px rgba(230, 28, 28, 0.5);
}
.warning-center {
  width: 100%;
  max-width: 400px;
  margin: auto;
  border: 2px solid red;
  height: 100px;
  line-height: 100px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: red;
  cursor: pointer;
  display: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(200,200,200);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(200,200,200);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(200,200,200);
}
/**************************/
.flex {
  display: flex !important;
}
.light-down {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(30,30,30,0.4);
  display: none;
}
/* confirm */
.confirm-box {
  font-family: 'Sarabun';
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 80%;
  height: 160px;
  background-color: rgb(250,250,250);
  margin: auto;
  margin-top: 140px;
  color: rgb(60,60,60);
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;
  box-shadow: 0px 0px 10px 0px rgba(30,30,30,0.4);
  display: none;
}
.confirm-box-message {
  height: 110px;
  padding: 10px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.confirm-box-message div {
  text-align: center;
  font-size: 14px;
  width: 100%;
  line-height: 2;
}
.confirm-box-btn {
  width: 100%;
  display: flex;

}
.confirm-box-btn button {
  flex-basis: 50%;
  height: 50px;
  border: none;
  box-sizing: border-box;
  font-family: 'Sarabun';
  font-size: 14px;
  color: rgb(245,245,245);
  cursor: pointer;
  outline: none;
}
.confirm-box-btn button:nth-child(1){
  background-color: #5b5;
}
.confirm-box-btn button:nth-child(1):hover{
  background-color: #50b550;
}
.confirm-box-btn button:nth-child(2){
  background-color:#e85353;
}
.confirm-box-btn button:nth-child(2):hover{
  background-color:#e34c4c;
}
/* alert */
.alert-box {
  font-family: 'Sarabun';
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 160px;
  margin: auto;
  margin-top: 20vh;
  color: rgb(60,60,60);
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(30,30,30,0.4);
  display: none;
}
.alert-box > .alert-box-msg {
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
  height: 110px;
  background-color: rgb(250,250,250);
}
.alert-box > .alert-box-msg div {
  width: 100%;
  text-align: center;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 1.8em;
}
.alert-box > .alert-box-btn {
  width: 100%;
}
.alert-box > .alert-box-btn button {
  width: 100%;
  height: 50px;
  border: none;
  box-sizing: border-box;
  font-family: 'Sarabun';
  font-size: 14px;
  color: rgb(245,245,245);
  cursor: pointer;
  outline: none;
}
.alert-box > .alert-box-btn button.error {
  background-color:#e85353;
}
.alert-box > .alert-box-btn button.error:hover {
  background-color:#e34c4c;
}
.alert-box > .alert-box-btn button.success {
  background-color: rgb(81, 179, 18);
}
.alert-box > .alert-box-btn button.success:hover {
  background-color: rgb(78, 175, 16);
}
/**************************************************/
.form-radio
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  border: 2px solid rgb(87, 90, 97);
  background-color: #fff;
  box-sizing: border-box;
}
.form-radio:checked::before{
  position: absolute;
  font-size: 25px;
  left: 3px;
  top: -11px;
  content: '✔';
  color: #f21212;
  transform: rotate(10deg);
}
/*********************************************************/
.spinner_style_1 {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.spinner_page {
  margin: 40vh auto;
  width: 40px;
  height: 40px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.cube1, .cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
/*******************************************/
.spinner_style_2 {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 60px;
  background-color: #0c62b7;

  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}