/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@charset "utf-8";
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*body,h1,h2,h3,h4,h5,h6 {font-family: "Chakra Petch",sans-serif; font-weight:300;}*/
/*body,h1,h2,h3,h4,h5,h6 {font-family: "Chakra+Petch", "Bai Jamjuree","Prompt",sans-serif; font-weight:300;}*/
body, html {height: 100%; line-height: 1.3; font-family: "Prompt", "Bai Jamjuree", "Kanit", sans-serif; font-weight:400;}
h1, h2, h3, h4, h5, h6 {font-weight: 400;}
.disable-scroll {overflow: hidden;}
a {text-decoration:none;}
input {line-height:1.8;}
.footer {font-size:0.9em; color:white;}
.scrlltip {position:fixed; bottom:10px; right:10px; cursor:pointer; font-size:64px; display:none;}
.menu-icon {font-size:45px; color:#2c7df6;}
.select2-selection__rendered {font-weight: 400;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dx-datagrid-export-button {width:36px; height:36px;}
.dx-icon-xlsxfile:before {font-size:32px; color:#607d8b;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*set header + logo*/
.header-logo {height:48px; float:left; position:relative;}
.header-users {height:80px; width:80px; position:relative; border-radius: 50%; margin-left:5px; margin-top:-5px;}
.header-swoc {height:60px; position:relative;}
.header-proj {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300;}
.wrapcols {word-wrap: break-word; white-space: nowrap;}

.w3-metal {color:#000!important; background-color:#f5f8fe!important;}
.w3-xmargin{margin:4px!important}.w3-xmargin-top{margin-top:4px!important}.w3-xmargin-bottom{margin-bottom:4px!important}
.w3-xmargin-left{margin-left:4px!important}.w3-xmargin-right{margin-right:4px!important}
.w3-address {resize:none; width:100%; height:150px; border:1px solid #dddddd;}s
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.new-dialog {height: 100%; width: 100%; display: none; position: fixed; z-index: 10; top: 0; left: 0; background-color: rgb(255,255,255); background-color: rgba(255,255,255, 0.9);}
.new-dialog-content {position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.new-dialog a {padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.8s ease;}
.new-dialog a:hover, .overlay a:focus {color: #f1f1f1;}
.new-dialog .closebtn {position: absolute; top: 20px; right: 45px; font-size: 60px;}

.notify-dialog {display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0);  background-color: rgba(0,0,0,0.4); }
.notify-dialog-content {background-color: #fefefe; margin: auto; padding: 0px; border: 1px solid #888; width: 45%; min-width:250px; max-width:500px; margin-top:15%;}
.bottom-dialog {position: fixed; bottom: 0; min-width: 250px; max-width:400px; width:60%; height:120px; z-index:1; display:none;}

.loading-dialog {display: none; position: fixed; z-index: 1; padding-top: 180px; left: 0; top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0);  background-color: rgba(0,0,0,0.7); }
.loading-dialog-content {margin: auto; padding: 0px; width: 45%; min-width:250px; max-width:500px; margin-top:15%;}
/*.loading-dialog-content {background-color: #fefefe; margin: auto; padding: 0px; border: 1px solid #888; width: 45%; min-width:250px; max-width:500px; margin-top:15%;}*/

.broadcast-dialog {display: none; position: fixed; z-index: 1; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0);  background-color: rgba(0,0,0,0.4); }
.broadcast-dialog-content {background-color: #fefefe; margin: auto; padding: 0px; border: 1px solid #888; width: 70%; margin-top:0%;}

.close {color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}
.close:hover,
.close:focus {color: #000; text-decoration: none; cursor: pointer;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.info-hide {display:none;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*for select2 fit with select option message*/
.select2-results {max-width:100% !important; text-overflow: ellipsis !important; word-wrap: normal !important; overflow: hidden !important; white-space: nowrap !important;}
.select2-results__option {max-width:100%;overflow: hidden !important; text-overflow: ellipsis !important; word-wrap: normal !important; white-space: nowrap !important;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.menu-sidebar {font-family: "Prompt", "Kanit", "Bai Jamjuree";}
/*font for system*/
.f-athiti {font-family: "Athiti", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300;}
.f-athiti-bold {font-family: "Athiti", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:500;}
.f-kanit {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300;}
.f-kanit-bold {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:500;}
.f-kanit-desc {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; color:#9b9b9b !important;}
.f-prompt {font-family: "Prompt", "Kanit", "Bai Jamjuree";}
.f-prompt-bold {font-family: "Prompt", "Kanit", "Bai Jamjuree"; font-weight:bold;}
.f-prompt-desc {font-family: "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300; color:#9b9b9b !important;}
.f-ptsan {font-family: "PT Sans", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300;}
.f-ptsan-bold {font-family: "PT Sans", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:bold;}
.f-raleway {font-family: "Raleway", "Prompt", "Kanit", "Bai Jamjuree";}
.f-raleway-bold {font-family: "Raleway", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:bold;}
.f-teko {font-family: "Teko", "Prompt", "Kanit", "Bai Jamjuree"; font-optical-sizing: auto; font-weight:300;}
.f-teko-bold {font-family: "Teko", "Prompt", "Kanit", "Bai Jamjuree"; font-optical-sizing: auto; font-weight:bold; font-weight:500;}

.f-base {font-family: "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300; }
.f-base-detail {font-family: "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300; color:#d59c9c !important;}
.f-base-detail2 {font-family: "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300; color:#9b9b9b !important;}

/*
.f-base-athiti {font-family: "Athiti", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300; }
.f-base-athiti-bold {font-family: "Athiti", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:500; }
.f-base-ptsan {font-family: "PT Sans", "Prompt", "Kanit", "Bai Jamjuree"; font-weight:300; }
.f-base-baij {font-family: "Bai Jamjuree", "Kanit", "Prompt", font-weight:300;}
.f-base-raleway {font-family: "Raleway", sans-serif;}
.f-base-raleway-bold {font-family: "Raleway", sans-serif; font-weight:bold;}
.f-base-teko {font-family: "Teko", sans-serif; font-optical-sizing: auto; font-weight:300;}
.f-base-teko-bold {font-family: "Teko", sans-serif; font-optical-sizing: auto; font-weight:bold; font-weight:500;}
.f-base-kanit {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; }
.f-base-kanit-bold {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:500; }
*/
/*.f-base-detail2 {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:200; color:#9b9b9b !important;}*/
.f-menu-head {font-family: "Prompt", "Kanit", "Bai Jamjuree"; font-weight:400; color:#978787 !important;}
.f-num {font-family: "Righteous", "Kanit", "Prompt", "Bai Jamjuree";}
::placeholder {color: #9b9b9b; opacity: 1;}
::-ms-input-placeholder {color: #9b9b9b;}

.base-normal {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#04AA6D;}
.base-warn {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#ff9800;}
.base-info {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#2196F3;}
.base-alert {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#f44336;}

.img-verify {width:80% !important;}
.menu-button {font-family: "Kanit", "Prompt", "Bai Jamjuree";}
.menu-button:hover {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#fbf4e1;}
.menu-side-button {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:white;}
.menu-side-button:hover {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#e1f6fb;}
.menu-side-button-hover {font-family: "Kanit", "Prompt", "Bai Jamjuree"; background-color:#e1f6fb;}

input[type="radio"] {-ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);}

.mdi-15px.mdi-set,.mdi-15px.mdi:before{font-size:15px}
.mdi-20px.mdi-set,.mdi-20px.mdi:before{font-size:20px}
.mdi-30px.mdi-set,.mdi-30px.mdi:before{font-size:30px}
.mdi-32px.mdi-set,.mdi-32px.mdi:before{font-size:32px}
.mdi-40px.mdi-set,.mdi-40px.mdi:before{font-size:40px}
.mdi-48px.mdi-set,.mdi-48px.mdi:before{font-size:48px}
.mdi-64px.mdi-set,.mdi-64px.mdi:before{font-size:64px}
.mdi-128px.mdi-set,.mdi-128px.mdi:before{font-size:128px}
.w3-margin-top-8px{margin-top:8px!important}
.w3-margin-bottom-8px{margin-bottom:8px!important}
.w3-margin-left-8px{margin-left:8px!important}.
.w3-margin-right-8px{margin-right:8px!important}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.a-user {color:black;}
.a-user:hover {color:#2c7df6;}
.a-user-setting {color:black; position:absolute; right:5px; top:12px;}
.a-user-setting:hover {color:#2c7df6;}
.a-link-item {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; color:black; font-size:1.1em;}
.a-link-item:hover {color:#2c7df6;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.img-loading {width:50%;}

.div-test {position:relative; border:1px solid blue; float:right;}
#toggler {background-color:#2c7df6; position:absolute; width:100px; top:40px; right:20px; display: block; z-index:9999; height:200px;}
.users-icon {position:absolute; right:20px; top:7px; float:right; font-size:30px; z-index:105 !important}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.setting-div-name {text-align:right; padding:0.5em; color:black;}
.setting-div-value {text-align:left;}
.setting-input-text {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:100%; z-index:3;}
.setting-input-text-forth {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:20%; z-index:3;}
.setting-input-text-one {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:20%; z-index:3;}
.setting-input-text-half {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:48%; z-index:3;}
.setting-input-text-third {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:75%; z-index:3;}
.setting-input-num {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:60%; z-index:3;}
.setting-input-text-date {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; height:45px; padding:0.5em; border:1px solid #dddddd; width:45%; z-index:3; text-align: center;}
.setting-input-file{font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; width:100%; z-index:3;}
.input-text-date {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; height:45px; padding:0.5em; border:1px solid #dddddd; width:47%; z-index:3; text-align: center;}

input[type="text"]:read-only {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; z-index:3; background-color:#f5f8fe;}
input[type="tel"]:read-only {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; z-index:3; background-color:#f5f8fe;}
textarea:disabled {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; background-color:#f5f8fe;}
input[type="password"]:read-only {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;height:45px; padding:0.5em; border:1px solid #dddddd; z-index:3; background-color:#f5f8fe;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*set user dropdown menu*/
div#users-nav { position: relative; } div#users-nav a {}
/*.users-dropdown-toggle { padding: 0; background: #777; }*/
.users-dropdown-toggle {}
ul.users-dropdown { display: none; position: absolute; top: 100%; margin-top: 5px; padding: 5px 5px 0 0; background: #777; }
ul.users-dropdown li { list-style-type: none; }
ul.users-dropdown li a { text-decoration: none; padding: 0em 1em; display: block; }
.ui-tooltip-content {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;}
div.ui-tooltip {max-width: 400px;}
.dx-widget {font-family: "Kanit" !important; font-weight:300;}
.dx-datagrid {font-family:"Kanit", "Prompt", "Bai Jamjuree", sans-serif;}
.dx-datagrid-filter-row, .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input  {font-family:"Kanit", "Prompt", "Bai Jamjuree", sans-serif;}  
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.w3-zoom:hover {transform: scale(1.1);}
.w3-shift-top:hover {transform: translate(0px, -20px) rotate(0deg);}
.w3-shift-bottom:hover {transform: translate(0px, 20px) rotate(0deg);}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*set no title bar on dialog popup*/
.no-titlebar .ui-dialog-titlebar {display: none;}
.no-padding .ui-content {padding: 0px !important; margin: 0px !important;}
.no-padding .ui-dialog {display: none; margin: 0px;}
.no-padding .ui-dialog-titlebar {display: none;}
.no-padding .ui-popup-container .ui-content {padding: 0px !important; margin: 0px !important;}
/*set button on popup dialog*/
.ui-button-text {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif;}
.msg-dialog {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; font-weight:300; z-index:999; font-size:1em;}
.edit-dialog {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; z-index:10; font-size:1em; position:absolute; top:0px; display:block;}
/*set datatable search input*/
.dataTables_filter input {width: 400px; height:43px; padding:0.5em; border:1px solid #cccccc; border-radius:0.5em;}
.dataTables_filter {float: left !important; margin-top:-50px !important; margin-left:-5px !important;}

/*for set datepicker font*/
div.ui-datepicker {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; font-size:1em;}
div.ui-datepicker select {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; font-size:1em;}
div.ui-datepicker button {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; font-size:1em;}
div.ui-dialog-buttonpane button {font-family: "Kanit";}
/*set chart div*/
.div-chart {font-family: "Kanit", "Prompt", "Bai Jamjuree", sans-serif; font-size:1em; height:200px;}
/*set header and menu theme*/
.w3-theme-d1 {color:#fff !important; background-color:#ff5722 !important}
.w3-theme-d1-hover:hover {color:#fff !important;  background-image:none !important; background-color:#e91e63 !important}

.w3-theme {color:#fff !important; background-color:#607d8b !important}
.w3-text-theme {color:#607d8b !important}
.w3-border-theme {border-color:#607d8b !important}
.w3-bar .w3-button {padding: 16px;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*set contact info*/
.a-contact {color:white;}
.a-contact:hover {color:black;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*set map image modal on contact*/
#mapimg {border-radius: 5px; cursor: pointer; transition: 0.3s;}
#mapimg:hover {opacity: 0.3;}
.modal {display: none; position: fixed; z-index: 1900; padding: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); }
.modal-content {margin: auto; display: block; opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden;}
@-webkit-keyframes zoom {from {-webkit-transform:scale(0)}  to {-webkit-transform:scale(1)}}
@keyframes zoom {from {transform:scale(0)}  to {transform:scale(1)}}
.map-close {position: absolute; top: 20px; left: 35px; color: #f1f1f1; font-size: 50px; font-weight: bold; transition: 0.3s;}
.map-close:hover,
.map-close:focus {color: #bbb; text-decoration: none; cursor: pointer;}
.container-map {position: relative; width: 100%;}
.image {opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden;}
.middle {transition: .5s ease; opacity: 0; position: absolute; top: 40px; left: 70px; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;}
.overlay {color: white; padding: 16px 32px;}
.container-map:hover .image {opacity: 0.3;}
.container-map:hover .middle {opacity: 1;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.w3-tooltips {position: relative; display: inline-block;}

.w3-tooltips .w3-tooltips-text {
	visibility: hidden;
  /*width: 120px;*/
	/*width:105%;*/
  padding:5px 0;
  /*width:110%;*/
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 30%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.w3-tooltips .w3-tooltips-text::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}
.w3-tooltips:hover .w3-tooltips-text {visibility: visible; opacity: 1;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*set highcharts chart and table additional*/
.highcharts-figure, .highcharts-data-table table {
	font-family: "Bai Jamjuree", "Prompt", sans-serif;
  min-width: 150px; 
  max-width: 1360px;
  margin: 1em auto;
}
.highcharts-data-table table {
	font-family: "Bai Jamjuree", "Prompt", sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

@media(max-width:1280px) 
{	
.header-proj {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; font-size:0.9em;}
}
@media(max-width:1080px) 
{
.header-proj {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; font-size:1em;}
}
@media(max-width:1024px) 
{
}
@media(max-width:991px) 
{
}
@media(max-width:800px) 
{
.img-loading {width:75%;}
}
@media(max-width:768px) 
{
}
@media(max-width:667px) 
{
}
@media(max-width:640px) 
{
.dataTables_filter input {width: 300px !important; padding:0.2em;}
.users-icon {right:90px !important}
#toggler {right:90px;}
.img-verify {width:30% !important;}
.bottom-dialog {position: fixed; bottom: 0; min-width: 300px; max-width:400px; width:60%; height:120px; z-index:1; display:none;}
}
@media (max-width: 600px) 
{
.report-div-name {text-align:left; padding-left:0.5em;}
.report-input{width:98%;}
.report-input-code{width:98%;}
.report-textarea {width:98%;}
.report-dateinfo{width:98%; text-align:center;}
.report-cost{width:98%;}
}
@media (max-width: 480px) 
{
.dataTables_filter input {width: 200px !important; padding:0.2em;}
}
@media (max-width: 414px) 
{
.header-proj {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; font-size:1.1em;}
}
@media (max-width: 384px) 
{
.header-proj {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; font-size:1em;}
}
@media (max-width: 375px) 
{
}
@media (max-width: 320px) 
{
.header-proj {font-family: "Kanit", "Prompt", "Bai Jamjuree"; font-weight:300; font-size:1em;}
.bottom-dialog {position: fixed; bottom: 0; min-width: 250px; max-width:400px; width:60%; height:120px; z-index:1; display:none;}
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/