@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: leelawadee;
  src: url("../fonts/leelawadee.ttf");
}
@font-face {
  /*font-family: raspoutine;*/
  /*src: url("../fonts/raspoutine.ttf");*/
}
/*@font-face {
	font-family: FontAwesome;
	src: url("../fonts/FontAwesome.ttf");
}*/
@font-face {
  font-family: CoreSans45;
  src: url("../fonts/CoreSans45Regular.ttf");
}
@font-face {
  font-family: CoreSans55;
  src: url("../fonts/CoreSans55Bold.ttf");
}
* {
  margin: 0;
  padding: 0;
  /*color: #383b40 !important;*/
  font-family: inherit;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: CoreSans45;
  font-size: 95%;
  background: #e8edef;
  height: 100%;
  min-height: 100%;
}
a {
  color: #015958;
}
a:hover {
  color: #333;
}
.text-red {
  color: #f56954 !important;
}
.text-green {
  color: #00a65a !important;
}
.text-yellow {
  color: #f39c12 !important;
}
.text-aqua {
  color: #00c0ef !important;
}
.text-light-blue {
  color: #3c8dbc !important;
}
.text-gray {
  color: #eeeeee !important;
}
.bg-gray {
  background: #eeeeee !important;
}
/* --- */
.group {
  display: table;
  width: 100%;
}
.group > div {
  display: table-cell;
  vertical-align: middle;
}
.group-icon {
  padding: 0;
}
.group-area {
  width: 100%;
}
.group input {
  border: 0;
  display: block;
  padding: 0;
}
.group .suggest-wrap {
}
div.waiting-screen {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
/* ------------- */

div#forgotPass div.buttons input.btnSubmit,
div.workplace #loadPage div.buttons a.btnAddNew,
div.workplace #loadPage button.btnSubmit,
.popupBody button.btnSubmit,
.popupBody span.btnSubmit,
div.workplace div.theForm button.btnSubmit,
div.workplace div.showRecord .btnSubmit,
div.workplace button.btnAdd {
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 1px 1px 1px #000;
  border: 1px solid #015958;
  font-size: 1em;
  min-height: 40px;
  background: #015958;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
  font-family: inherit;
}
div#forgotPass div.buttons input.btnSubmit:hover,
div.workplace #loadPage div.buttons a.btnAddNew:hover,
.popupBody button.btnSubmit:hover,
.popupBody span.btnSubmit:hover,
div.workplace div.theForm button.btnSubmit:hover,
div.workplace div.showRecord button.btnSubmit:hover,
div.workplace button.btnAdd:hover {
  /*background-image: -webkit-linear-gradient(top, #e59125, #057e7c);
	background-image: -moz-linear-gradient(top, #e59125, #057e7c);
	background-image: -ms-linear-gradient(top, #e59125, #057e7c);
	background-image: -o-linear-gradient(top, #e59125, #057e7c);
	background-image: linear-gradient(to bottom, #e59125, #057e7c);*/

  background: #059695;
}
.popupBody .btnSubmit.pay,
div.workplace div.theForm .btnSubmit.pay {
  background: #999;
  border: 1px solid #666;
}
.popupBody .btnSubmit.pay:hover,
div.workplace div.theForm .btnSubmit.pay:hover {
  background: #aaa;
}
div.workplace div.theForm .btnSubmit:disabled,
div.workplace button.btnAdd:disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.popupBody .btnSubmit.second,
div.workplace div.theForm button.btnSubmit.second {
  margin-left: 10px;
}
/*Sumo select */
/* ---- */
.SumoSelect {
  width: 98%;
}
.SelectBox {
  padding: 7.5px 8px;
}
.sumoStopScroll {
  overflow: hidden;
}

/* this is applied on that hidden select.
DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */
.SelectClass,
.SumoUnder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.SelectClass {
  z-index: 1;
}
.SumoSelect > .optWrapper > .options li.opt label,
.SumoSelect > .CaptionCont,
.SumoSelect .select-all > label {
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
.SumoSelect {
  display: inline-block;
  position: relative;
  outline: none;
}
.SumoSelect > .CaptionCont {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin: 0;
  background: #fff;
  font-size: 0.9em;
}
.SumoSelect > .CaptionCont > span {
  display: block;
  padding-right: 30px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
}
.SumoSelect > .CaptionCont > span.placeholder {
  color: #ccc;
  font-style: italic;
}
.SumoSelect > .CaptionCont > label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
}
.SumoSelect > .CaptionCont > label > i {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=");
  background-position: center center;
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-repeat: no-repeat;
  opacity: 0.8;
}

.SumoSelect > .optWrapper {
  display: none;
  z-index: 1000;
  top: 28px;
  width: 100%;
  position: absolute;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ddd;
}
.popUpForm .SumoSelect > .optWrapper {
  overflow-y: auto;
  max-height: 150px;
}
.SumoSelect.open > .optWrapper {
  top: 33px;
  display: block;
}
.SumoSelect.open > .optWrapper.up {
  top: auto;
  bottom: 100%;
  margin-bottom: 5px;
}
.SumoSelect > .optWrapper ul {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
  overflow: auto;
}
.SumoSelect > .optWrapper > .options {
  border-radius: 2px;
  position: relative;
  /*Set the height of pop up here (only for desktop mode)*/
  max-height: 250px;
}
.SumoSelect > .optWrapper > .options li.group.disabled > label {
  opacity: 0.5;
}
.SumoSelect > .optWrapper > .options li ul li.opt {
  padding-left: 22px;
}
.SumoSelect > .optWrapper.multiple > .options li ul li.opt {
  padding-left: 50px;
}
.SumoSelect > .optWrapper.isFloating > .options {
  max-height: 100%;
  -webkit-box-shadow: 0 0 100px #595959;
  box-shadow: 0 0 100px #595959;
}
.SumoSelect > .optWrapper > .options li.opt {
  padding: 6px 6px;
  position: relative;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.9em;
}
.SumoSelect > .optWrapper > .options > li.opt:first-child {
  border-radius: 2px 2px 0 0;
}
.SumoSelect > .optWrapper > .options > li.opt:last-child {
  border-radius: 0 0 2px 2px;
  border-bottom: none;
}
.SumoSelect > .optWrapper > .options li.opt:hover {
  background-color: #e4e4e4;
}
.SumoSelect > .optWrapper > .options li.opt.sel {
  background-color: #a1c0e4;
  border-bottom: 1px solid #a1c0e4;
}
.SumoSelect > .optWrapper > .options li label {
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  cursor: pointer;
}
.SumoSelect > .optWrapper > .options li span {
  display: none;
}
.SumoSelect > .optWrapper > .options li.group > label {
  cursor: default;
  padding: 8px 6px;
  font-weight: bold;
}
/*Floating styles*/
.SumoSelect > .optWrapper.isFloating {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  margin: auto;
  max-height: 90%;
}
/*disabled state*/
.SumoSelect > .optWrapper > .options li.opt.disabled {
  background-color: inherit;
  pointer-events: none;
}
.SumoSelect > .optWrapper > .options li.opt.disabled * {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */
  filter: alpha(opacity=50); /* Netscape */
  -moz-opacity: 0.5; /* Safari 1.x */
  -khtml-opacity: 0.5; /* Good browsers */
  opacity: 0.5;
}
/*styling for multiple select*/
.SumoSelect > .optWrapper.multiple > .options li.opt {
  padding-left: 35px;
  cursor: pointer;
}
.SumoSelect > .optWrapper.multiple > .options li.opt span,
.SumoSelect .select-all > span {
  position: absolute;
  display: block;
  width: 30px;
  top: 0;
  bottom: 0;
  margin-left: -35px;
}
.SumoSelect > .optWrapper.multiple > .options li.opt span i,
.SumoSelect .select-all > span i {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #aeaeae;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.SumoSelect > .optWrapper > .MultiControls {
  display: none;
  border-top: 1px solid #ddd;
  background-color: #fff;
  /*box-shadow: 0 0 2px rgba(0, 0, 0, 0.13); */
  border-radius: 0 0 3px 3px;
}
.SumoSelect > .optWrapper.multiple.isFloating > .MultiControls {
  display: block;
  margin-top: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls {
  display: block;
}
.SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p {
  padding: 6px;
}
.SumoSelect > .optWrapper.multiple > .MultiControls > p {
  display: inline-block;
  cursor: pointer;
  padding: 12px;
  width: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
.SumoSelect > .optWrapper.multiple > .MultiControls > p:hover {
  background-color: #f1f1f1;
}
.SumoSelect > .optWrapper.isFloating > .options li.opt {
  padding: 12px 6px;
}
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i,
.SumoSelect .select-all.selected > span i,
.SumoSelect .select-all.partial > span i {
  background-color: rgb(26, 39, 88);
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: center center;
}
div.workplace #loadPage #btnDisplayMore {
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  /*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #EDEDED), color-stop(1, #DFDFDF));
	background:-moz-linear-gradient(top, #EDEDED 5%, #DFDFDF 100%);
	background:-webkit-linear-gradient(top, #EDEDED 5%, #DFDFDF 100%);
	background:-o-linear-gradient(top, #EDEDED 5%, #DFDFDF 100%);
	background:-ms-linear-gradient(top, #EDEDED 5%, #DFDFDF 100%);
	background:linear-gradient(to bottom, #EDEDED 5%, #DFDFDF 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDEDED', endColorstr='#DFDFDF',GradientType=0);
  background-color: #ededed;
  border: 1px solid #dcdcdc;
  text-shadow: 0px 1px 0px #ffffff;
}
div.workplace #loadPage #btnDisplayMore:hover {
  /*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #DFDFDF), color-stop(1, #EDEDED));
	background:-moz-linear-gradient(top, #DFDFDF 5%, #EDEDED 100%);
	background:-webkit-linear-gradient(top, #DFDFDF 5%, #EDEDED 100%);
	background:-o-linear-gradient(top, #DFDFDF 5%, #EDEDED 100%);
	background:-ms-linear-gradient(top, #DFDFDF 5%, #EDEDED 100%);
	background:linear-gradient(to bottom, #DFDFDF 5%, #EDEDED 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFDFDF', endColorstr='#EDEDED',GradientType=0);
  background-color: #dfdfdf;
}

/* ----------------------------------------------------------- */
/* ----------------------- login form ------------------------ */
/* ----------------------------------------------------------- */
div.index {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: leelawadee;
  /*background: url(../images/system/index-cover.jpeg) no-repeat;*/
  background-size: cover;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.index main {
  width: 80%;
  height: 70vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
div.index div.developer,
div.index aside {
  width: 48%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.index div.developer {
  width: 52%;
}
div.index aside {
  padding: 0% 4%;
  border-left: 1px solid #3399cc;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.index .developer .logoWrap {
  text-align: center;
}
.index .developer .logoWrap img {
  width: 320px;
  height: auto;
  max-width: 100%;
}
/**/
div.index div.developer p.info {
  float: left;
  width: 70%;
  margin: 0 15%;
  font-size: 1em;
  line-height: 21px;
  color: #6a5434;
  text-align: center;
}
div.index div.developer .sostecWrap {
  float: left;
  width: 100%;
  margin-top: 1.5em;
  text-align: center;
}
div.index div.developer .sostecWrap img {
  width: 200px;
  border: none;
}
div.index div.developer .social {
  float: left;
  width: 32%;
  margin: 2% 34%;
}
div.index div.developer .social .box {
  float: left;
  width: 25%;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.index div.developer .social .box span {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.2em;
  color: #fff;
  background-color: #f00;
  border-radius: 99em;
}
div.index div.developer .social .box span.facebook {
  background-color: #253d80;
}
div.index div.developer .social .box span.twitter {
  background-color: #259ed9;
}
div.index div.developer .social .box span.youtube {
  background-color: #af1f2b;
}
div.index div.developer .social .box span.linked {
  background-color: #0278b6;
}
/* -- */
div.index aside h2 {
  /*font-family: raspoutine;*/
  font-size: 2em;
  color: #1c75bc;
  font-weight: 500;
  letter-spacing: -1px;
}
div.index aside p {
  margin: 10px 0;
}
div.index aside div.record {
  position: relative;
  width: 90%;
  padding: 1% 0;
  background: #fff;
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
div.index aside div.record:nth-child(1) {
  margin-top: 5%;
  border-bottom: none;
}
div.index aside div.record.borderless {
  margin-top: 3%;
  padding: 0;
  background: transparent;
  border: none;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
div.index aside div.record.borderless .remember {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
div.index aside div.record.highlight {
  border: 1px solid #f00;
}
div.index aside div.record span#icon {
  width: 15%;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #999;
  font-size: 1.3em;
  border-right: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.index aside div.record input.loginText {
  width: 85%;
  height: 34px;
  padding-left: 3%;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.index aside div.record input.loginText:focus {
  outline: none;
}
div.index aside div.tooltip {
  position: absolute;
  left: 15%;
  top: 42px;
  padding: 5px 20px;
  background-color: #f2d183;
  color: #333;
  text-align: center;
  font-size: 0.85em;
  display: none;
}
div.index aside div.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #f2d183 transparent;
}
div.index aside label.error {
  float: left;
  width: 90%;
  margin: 2% 0 2% 16%;
  padding: 0 0 0 4%;
  font-size: 0.9em;
  font-weight: 600;
  color: #f00;
  background: url(../images/system/error_s.png) left 2px no-repeat;
  display: none;
}
div#loginWrap div#content div.record div.switch,
div.workplace div.theForm div.switch,
div.index aside div.record div.switch {
  position: relative;
  margin-right: 10px;
  float: left;
  width: 42px;
  height: 22px;
  background: #cccccc;
  z-index: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
div.workplace div.theForm div.switch {
  margin-top: 5px;
}
div.workplace div.theForm.sales div.record div.switch {
  margin-top: 2px;
}
div#loginWrap div#content div.record div.switch:before,
div.workplace div.theForm div.switch:before,
div.index aside div.record div.switch:before {
  content: " ";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 40px;
  height: 20px;
  background: #cccccc;
  z-index: 1;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
div#loginWrap div#content div.record div.switch:after,
div.workplace div.theForm div.switch:after,
div.index aside div.record div.switch:after,
div.index aside div.record div.switch:after {
  content: " ";
  height: 19px;
  width: 19px;
  border-radius: 18px;
  background: #fff;
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 1px;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-box-shadow: 0 2px 5px #999999;
  box-shadow: 0 2px 5px #999999;
}
div#loginWrap div#content div.record div.switch.switchOn,
div.workplace div.theForm div.switch.switchOn,
div#loginWrap div#content div.record div.switch.switchOn:before,
div.workplace div.theForm div.switch.switchOn:before,
div.index aside div.record div.switch.switchOn:before {
  background: #015958 !important;
}
div#loginWrap div#content div.record div.switch.switchOn:after,
div.workplace div.theForm div.switch.switchOn:after,
div.index aside div.record div.switch.switchOn:after {
  left: 22px !important;
}
div#loginWrap div#content div.record input#rememberMe,
div.workplace div.theForm div.record input#saReceipt,
div.workplace div.theForm div.record input#whouseAs,
div.workplace div.theForm div.record input#VATIsRequired,
div.workplace div.theForm div.record input#POSAccount,
div.workplace div.theForm div.record input#assetLoan,
div.workplace div.theForm div.record input#sameUnit,
div.popupBody input#sameUnits,
div.workplace div.theForm div.record input#isDefualt,
div.popupBody input#isDefualt,
div.workplace div.theForm div.record input#payableExpense,
div.workplace div.theForm input#beginBalance,
div.workplace div.theForm input#isExtraCost,
div.workplace div.theForm input#isCashCustomer,
div.workplace div.theForm input#salesSrv,
div.workplace div.theForm input#hasInvoice,
div.workplace div.theForm input#orderOnly,
div.index aside div.record input#rememberMe {
  display: none;
  opacity: 0;
  filter: alpha(opacity=0);
}
div.index aside div.record span#rememberLbl {
  margin-top: -1.5%;
}
div#loginWrap div.record span#rememberLbl,
div.workplace div.theForm div.record span#checkReceipt,
div.workplace div.theForm div.record span#checkwhouseAs,
div.workplace div.theForm div.record span#checkVATIsRequired,
div.workplace div.theForm div.record span#checkUnit,
div.popupBody span#checkUnits,
div.workplace div.theForm span#checkBlnce,
div.workplace div.theForm span#checkIsExtraCost,
div.index aside div.record span#rememberLbl,
div.index aside div.record a#forgot {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 0.95em;
}
div.popupBody span#checkUnit {
  float: left;
  height: 30px;
  line-height: 30px;
  font-size: 0.95em;
}
div#loginWrap div.record #rememberLbl:hover,
div.workplace div.theForm #checkReceipt:hover,
div.workplace div.theForm div.record span#checkwhouseAs:hover,
div.workplace div.theForm div.record span#checkVATIsRequired:hover,
div.workplace div.theForm div.record span#checkPOSAccount:hover,
div.workplace div.theForm div.record span#checkUnit:hover,
div.popupBody span#checkUnits:hover,
div.workplace div.theForm span#checkBlnce:hover,
div.workplace div.theForm span#checkIsExtraCost:hover,
div.index aside div.record #rememberLbl:hover {
  cursor: pointer;
}
div.index aside div.record span#rememberLbl,
div.workplace div.theForm div.record span#checkwhouseAs,
div.workplace div.theForm div.record span#checkVATIsRequired,
div.workplace div.theForm div.record span#checkPOSAccount,
div.index aside div.record a#forgot {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 0.95em;
}
div.index aside div.record #rememberLbl:hover {
  cursor: pointer;
}
div.index aside div.record a#forgot {
  float: right;
  text-decoration: none;
}
div.index aside div.record a#forgot:hover,
div.index aside div.record a#forgot:focus {
  text-decoration: underline;
}
div.index aside div.record #submitBtn {
  float: left;
  width: 100%;
  margin: 2% 0 1%;
  height: 40px;
  /*font: 1em raspoutine;*/
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: #fff;
  background: #5a3a31;
  border: none;
  background: #015958;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
}
div.index aside div.record #submitBtn:hover {
  background: #0d9695;
}
div.index aside div.record label#copyRight {
  font-size: 0.9em;
  color: #666;
  text-align: center;
}

/* ----------------------------------------------------------- */
/* -------------------- forgot password ---------------------- */
/* ----------------------------------------------------------- */
div#forgotPass {
  float: left;
  width: 100%;
  height: 100vh;
  background: #fff;
  font-family: leelawadee;
}
div#forgotPass div#topBar,
div#forgotPass div#bottomBar {
  float: left;
  width: 100%;
  height: 90px;
  background: #ebeef2;
}
div#forgotPass div#bottomBar {
  height: 8px;
  background: #826130;
}
div#forgotPass div#topBar #logoWrap {
  float: left;
  width: 20%;
  margin: 0% 0 0 15%;
}
div#forgotPass #logoWrap img {
  position: relative;
  width: 100px;
  top: 0px;
}
/* --- */
div#forgotPass div#section {
  float: left;
  width: 70%;
  margin: 5% 15% 0;
}
div#forgotPass div#section label.title {
  float: left;
  width: 100%;
  color: #666;
  /*font-family: raspoutine;*/
  font-size: 2em;
}
div#forgotPass div#section label.title.success {
  color: #339900;
}
div#forgotPass div#section div.center {
  float: left;
  width: 49%;
  margin: 3% 0;
}
div#forgotPass div#section div.center.right {
  float: right;
  width: 45%;
}
div#forgotPass div#section div#imgWrap {
  float: left;
  width: 40%;
}
div#forgotPass div#imgWrap img {
  width: 100%;
  border: none;
}
div#forgotPass div#section div#text {
  float: right;
  width: 57%;
  font-size: 0.9em;
}
div#forgotPass div#text p {
  float: left;
  width: 100%;
  line-height: 21px;
  word-wrap: break-word;
}
div#forgotPass div#text p:first-child {
  margin: 0 0 10%;
}
div#forgotPass div#text p span {
  font-weight: 600;
}
/* --- */
div#forgotPass div#section div.record {
  float: left;
  width: 100%;
}
div#forgotPass div#section div.record.two {
  margin-top: 5%;
}
div#forgotPass div#section div.buttons {
  float: left;
  width: 96%;
  height: 60px;
  margin: 3% 0;
  padding: 0 2%;
  background: rgba(136, 165, 240, 0.2);
}
div#forgotPass div.record #qybMidig,
div#forgotPass div.record #qybBidix {
  float: left;
  width: 100%;
}
div#forgotPass div.record #qybMidig {
  margin: 0 0 1%;
  color: #444;
}
div#forgotPass div.record input {
  float: left;
  width: 96%;
  height: 34px;
  margin: 1.5% 1.5% 0 0;
  padding: 0 0 0 3%;
  color: #666;
  border: 1px solid #ccc;
}
div#forgotPass div.record input:focus {
  outline: none;
  background: #eefaeb;
  border: 1px solid #aaa;
}
div#forgotPass div.record label.error {
  float: left;
  margin: 1% 0 0;
  width: 90%;
  padding: 0 0 0 20px;
  color: #f00;
  font-size: 0.9em;
  line-height: 18px;
  background: url(../images/system/error_s.png) left 3px no-repeat;
  display: none;
}
/* --- */
div#forgotPass div.buttons a#back {
  float: left;
  margin-top: 2.3%;
  text-decoration: none;
}
div#forgotPass div.buttons a#back:hover {
  text-decoration: underline;
}
div#forgotPass div.buttons input.btnSubmit {
  float: right;
  margin-top: 1.3%;
  padding: 0.8% 4.5%;
  font-size: 1.05em;
}
div#forgotPass div.buttons input.btnSubmit.left {
  float: left;
}
div#forgotPass div#imgWrap2 img {
  float: right;
  width: 430px;
  height: 200px;
  border: none;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
div#forgotPass div#imgWrap2 img:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

@media only screen and (max-width: 1118px) {
  div.index main {
    width: 90%;
  }
}

@media only screen and (max-width: 1033px) {
  div.index aside div.record.five.borderless {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 7px;
  }
}

@media only screen and (max-width: 830px) {
  .index .developer .logoWrap img {
    width: 200px;
  }
  div.index main {
    height: auto;
    padding: 3.5% 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }

  div.index aside div.record.five.borderless {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
          }

  div.index aside {
    width: 100%;
    border-left: none;
    border-top: 1px solid #3399cc;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  div.index aside h2 {
    margin-top: 5%;
  }

  div.index aside div.record,
  div.index aside form {
    width: 100%;
  }
}

/* ----------------------------------------------------------- */
/* ---------------------- dashboard -------------------------- */
/* ----------------------------------------------------------- */
.main-wrap {
  position: relative;
  width: 92%;
  min-height: 652px;
  padding-left: 8%;
  font-family: leelawadee;
  height: 100%;
  min-height: 100%;
}
.dashboard,
div.workplace {
  position: relative;
  width: 100%;
}
.dashboard .middlebar,
div.workplace .middlebar {
  position: relative;
  height: 100vh;
  width: 100%;
}
/**/

.main-wrap .sidebar {
  position: fixed;
  min-height: 100vh;
  width: 8%;
  top: 0;
  left: 0;
  /*background: #015958;*/
  background: #015958;
  z-index: 5;
  outline: none;
  font-family: CoreSans45;
}
.sidebar .logoWrap {
  padding-top: 17px;
  height: 60px;
  text-align: center;
  background: #015958;
  background: #015958;
}
.sidebar .logoWrap img {
  position: relative;
  width: 90%;
  margin-top: 10%;
}
.sidebar .logoWrap .big-new-button {
  width: 80%;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 30px;
  margin-top: 30%;
  margin-left: 7%;
  padding: 2%;
  cursor: pointer;
}
.sidebar .logoWrap .big-new-button:before {
  position: relative;
  font-family: FontAwesome;
  content: "\f067";
  margin-right: 10%;
  font-weight: normal;
  cursor: pointer;
}
.sidebar .logoWrap .btn-new-list {
  width: 90vh;
  position: absolute;
  height: 50vh;
  background: #fff;
  margin-left: 110%;
  margin-top: -10%;
  text-align: left;
  border-radius: 5px;
  font-family: CoreSans45;
  -webkit-box-shadow: inset 1px 1px 5px 1px #767575;
  box-shadow: 1px 1px 15px 1px #767575;
  display: none;
  z-index: 10;
}
.sidebar .logoWrap .btn-new-list a:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 1.2em;
  margin-right: 5%;
}
.sidebar .logoWrap .btn-new-list .customer-new-list {
  width: 40%;
  margin: 10% 5%;
  float: left;
}
.sidebar .logoWrap .btn-new-list .customer-new-list h3 {
  font-size: 1em;
  font-weight: bold;
}
.sidebar .logoWrap .btn-new-list .customer-new-list a {
  color: #000;
  text-decoration: none;
  width: 100%;
  margin: 5%;
  display: block;
  font-family: CoreSans45;
  font-size: 0.85em;
}
.sidebar .logoWrap .btn-new-list .customer-new-list a:hover {
  color: #635f5f;
}
.sidebar .logoWrap .btn-new-list .vendor-new-list {
  width: 40%;
  margin: 10% 5%;
  float: right;
}
.sidebar .logoWrap .btn-new-list .vendor-new-list h3 {
  font-size: 1em;
  font-weight: bold;
}
.sidebar .logoWrap .btn-new-list .vendor-new-list a {
  color: #000;
  text-decoration: none;
  width: 100%;
  margin: 5%;
  display: block;
  font-family: CoreSans45;
  font-size: 0.85em;
}
.sidebar .logoWrap .btn-new-list .vendor-new-list a:hover {
  color: #635f5f;
}
.sidebar ul {
  margin-top: 40%;
  list-style: none;
  padding: 0.5em 0;
}
.sidebar ul li {
  padding: 7% 7%;
  text-align: center;
  color: white;
  cursor: pointer;
}
.sidebar ul li:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.sidebar ul li.active {
  background-color: rgba(0, 0, 0, 0.2);
}
.sidebar > ul a {
  color: white;
  text-decoration: none;
}
.sidebar > ul i {
  display: block;
  margin-bottom: 6px;
  font-size: 1.5em;
}
.sidebar > ul span {
  font-size: 0.85em;
}
.sidebar footer {
  position: absolute;
  bottom: 50px;
  line-height: 20px;
  color: white;
  text-align: center;
  width: 100%;
}
/**/
.sidebar ul li:hover ul {
  display: block;
}
.sidebar ul ul {
  width: 200px;
  background: #fff;
  -webkit-box-shadow: inset 1px 1px 5px 1px #767575;
  box-shadow: 1px 1px 15px 1px #767575;
  margin: 10%;
  position: absolute;
  margin-left: 95%;
  margin-top: -55%;
  border-radius: 10px;
  display: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.sidebar ul ul li {
  width: 86%;
  padding: 3% 7%;
  margin: 0;
  text-align: left;
  border-bottom: 1px solid #532317;
  color: #015958;
}
.sidebar ul ul li:last-child {
  border-bottom: none;
}
/* --- */
.middlebar div.topBar {
  padding: 0 2%;
  height: 60px;
  color: #f3f3f3;
  color: #666363;
  background: #441b11;
  background: #a7a7a7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #e8edef;
  height: 40px;
}
.middlebar div.topBar #programName {
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  font-size: 1.15em;
  font-weight: 500;
  text-transform: capitalize;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.middlebar div.topBar .mobile-toggler {
  border: none;
  display: none;
}

.middlebar div.topBar #programName > span {
  position: relative;
  left: 10px;
  font-family: CoreSans45;
  text-transform: capitalize;
}
.middlebar .topBar .filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.middlebar .topBar .filter input {
  width: 44%;
  height: 30px;
  text-align: center;
  color: #000000;
  font-family: lato;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.5px;
  background-color: #ffffff;
  border: 1px solid #7d7d7d;
  border: 1px solid #fff;
  outline: none;
  border-radius: 4px;
  cursor: default;
  background: transparent;
  border-color: transparent;
  color: #015958;
}
.middlebar div.topBar .topIcons {
  position: relative;
  float: right;
  width: 24%;
  height: 40px;
  padding-right: 2%;
  text-align: right;
}
.middlebar .topIcons div.icon {
  position: relative;
  top: 1px;
  width: 35px;
  height: 35px;
  display: inline-block;
}
.middlebar .topIcons div.icon.profile > img {
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center center;
  border-radius: 99em;
  cursor: pointer;
}
.middlebar .topIcons div.dropDown {
  position: absolute;
  right: 4px;
  width: 300px;
  top: 50px;
  text-align: left;
  color: #333;
  background: #fff;
  border: 1px solid rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
.middlebar .topIcons div.dropDown:after,
.middlebar .topIcons div.dropDown:before {
  content: "";
  display: block;
  position: absolute;
  right: 2.5%;
  width: 0;
  height: 0;
  border-style: solid;
}
.middlebar .topIcons div.dropDown:after {
  top: -22px;
  border-color: transparent transparent #dcdcdc transparent;
  border-width: 11px;
}
.middlebar .topIcons div.dropDown:before {
  top: -22px;
  border-color: transparent transparent #dcdcdc transparent;
  border-width: 11px;
}
.middlebar .topIcons div.dropDown div.row {
  float: left;
  width: 90%;
  height: auto;
  line-height: normal;
  padding: 3% 5%;
  font-size: 0.9em;
  border-bottom: 1px solid #aaa;
}
.middlebar .topIcons div.dropDown div.row:last-child {
  padding: 2% 5%;
  border-bottom: none;
}
.middlebar .topIcons div.dropDown a {
  text-decoration: none;
}
.middlebar .topIcons div.dropDown div.row.bar {
  background: #dcdcdc;
  /*font-family: raspoutine;*/
  font-size: 0.95em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /*background: red;*/
}
.middlebar .topIcons div.dropDown div.row #photo {
  float: left;
  width: 25%;
  position: relative;
}
.middlebar .topIcons div.dropDown div.row #links {
  float: right;
  width: 70%;
  margin-top: 2%;
}
.middlebar .topIcons div.dropDown #photo img {
  float: left;
  width: 100%;
  height: 100%;
  border-radius: 99em;
  border: 1px solid #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.middlebar .topIcons div.dropDown .overlay {
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  text-align: center;
  overflow: hidden;
  border-radius: 99em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.middlebar .topIcons div.dropDown div.row #photo:hover .overlay {
  height: 100%;
  background: #af734a;
  cursor: pointer;
}
.middlebar .topIcons div.dropDown .overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1em;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.middlebar .topIcons div.dropDown .overlay span i {
  display: block;
  margin-bottom: 5px;
  font-size: 1.1em;
}
.middlebar .topIcons div.dropDown div.row #links p {
  float: left;
  width: 100%;
  font-size: 0.9em;
  margin-bottom: 1%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.middlebar .topIcons div.dropDown div.row #links p#name {
  font-weight: 600;
  font-size: 0.95em;
}
.middlebar .topIcons div.dropDown div.row #links p#user {
  color: #666;
}
.middlebar .topIcons div.dropDown div.row.button {
  padding: 3% 5%;
  background: #efefef;
}
.middlebar .topIcons div.dropDown div.row.button a {
  float: left;
  width: 50%;
  margin-top: 2%;
}
.middlebar .topIcons div.dropDown div.row.button a.logout {
  float: right;
  width: 35%;
  margin: 0;
  padding: 2% 0;
  text-align: center;
  color: #666;
  font-size: 0.9em;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dcdcdc;
}
.middlebar .topIcons div.dropDown div.row.button a i.fa {
  position: relative;
  top: 1.5px;
}
.middlebar .topIcons div.dropDown div.row.button a span {
  position: relative;
  left: 8px;
  font-size: 0.9em;
}
/* -- */
.middlebar #adjust-alert div.dropDown-list {
  position: absolute;
  left: -72%;
  width: 85%;
  top: 44px;
  text-align: left;
  color: #333;
  background: #fff;
  border: 1px solid rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
.middlebar #adjust-alert div.dropDown-list.payable {
  left: -59%;
}
.middlebar #adjust-alert div.dropDown-list.store {
  left: -47%;
}
.middlebar #adjust-alert div.dropDown-list:after,
.middlebar #adjust-alert div.dropDown-list:before {
  content: "";
  display: block;
  position: absolute;
  right: 2.5%;
  width: 0;
  height: 0;
  border-style: solid;
}
.middlebar #adjust-alert div.dropDown-list:after {
  top: -22px;
  border-color: transparent transparent #dcdcdc transparent;
  border-width: 11px;
}
.middlebar #adjust-alert div.dropDown-list:before {
  top: -22px;
  border-color: transparent transparent #dcdcdc transparent;
  border-width: 11px;
}
.middlebar #adjust-alert div.dropDown-list div.row {
  float: left;
  width: 90%;
  height: auto;
  line-height: normal;
  padding: 1.5% 5%;
  font-size: 0.9em;
  border-bottom: 1px solid #aaa;
  text-transform: capitalize;
}
.middlebar #adjust-alert div.dropDown-list div.row:hover {
  background-color: #ccc;
}
.middlebar #adjust-alert div.dropDown-list div.row:last-child {
  padding: 2% 5%;
  border-bottom: none;
}
.middlebar #adjust-alert div.dropDown-list div.row.bar {
  background: #dcdcdc;
  /*font-family: raspoutine;*/
  font-size: 0.95em;
}

.middlebar #adjust-alert div.dropDown-list div.row.button {
  padding: 1% 5%;
  background: #efefef;
}
.middlebar #adjust-alert div.dropDown-list div.row.button a {
  float: left;
  width: 50%;
  margin-top: 2%;
}
.middlebar #adjust-alert div.dropDown-list div.row.button a.view-all {
  float: left;
  width: 80%;
  margin: 0 0 0 10%;
  padding: 2% 0;
  text-align: center;
  color: #666;
  font-size: 0.9em;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dcdcdc;
}
.middlebar #adjust-alert div.dropDown-list div.row.button a.view-all:hover {
  background-color: #eee;
}
.middlebar #adjust-alert div.dropDown-list div.row span {
  position: relative;
  float: right;
  left: 8px;
  font-size: 0.9em;
}
/* -- */
#adjust-alert {
  padding-left: 25%;
  padding-right: 10%;
}
#adjust-alert.right-side {
  padding-left: 50%;
  padding-right: 0%;
}
div.topMenu {
  margin-top: -5.7%;
  float: left;
  width: 90%;
  height: 45px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#adjust-alert.right-side div.topMenu {
  margin-top: -7%;
}
div.topMenu span.menu {
  float: left;
  width: 15.95%;
  line-height: 45px;
  text-align: right;
  padding-right: 2%;
  /*font-family: raspoutine;*/
  color: #fff;
  border-right: 1px dotted #666;
}
div.topMenu ul {
  position: relative;
  height: 45px;
  list-style: none;
}
div.topMenu > ul > li {
  float: left;
  min-width: auto;
  height: 35px;
  line-height: 40px;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 2%;
}
div.topMenu > ul > li label.title {
  font-style: italic;
  cursor: pointer;
  color: #fff;
}
div.topMenu > ul > li label.title i {
  font-size: 1.5em;
}
div.topMenu > ul > li span {
  position: relative;
  margin-left: 0px;
  padding: 2px 5px;
  font-size: 0.8em;
  background-color: #eee;
  color: #fff;
  border-radius: 5px;
}
div.topMenu > ul > li span.red {
  background-color: #f00;
  color: #fff;
}
div.topMenu > ul > li span.green {
  background-color: rgb(0, 180, 0);
  color: #fff;
}
div.topMenu > ul > li span.orange {
  background-color: rgb(225, 115, 0);
  color: #fff;
}
div.topMenu ul li:hover {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.5);
}
#adjust-alert.right-side.right {
  padding-left: 80%;
}
#adjust-alert.right-side.right div.topMenu {
  margin-top: -19%;
}
#adjust-alert.right-side.right div.topMenu li.appInfo label.appInfo {
  color: #d7981f;
}

/* --- */
.middlebar .dashboard-content .order-form {
  margin: 0.7% 2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.middlebar .order-form .top-bars {
  padding: 16px 30px;
  /*height: 250px;*/
  margin-bottom: 3px;
  background: #fff;
  border: 1px solid #dfe5e6;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  overflow-y: scroll;
  overflow-y: hidden;
  display: flex;
  width: 93%;
  padding: 16px 0px;
  margin: 1%;
  padding: 20px;
}
.middlebar .order-form .top-bars .boxes {
  -ms-flex-preferred-size: 24.5%;
  flex-basis: 24.5%;
  background: #4f99e4;
  margin-left: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: CoreSans45;
  height: 80px;
  line-height: 25px;
}
.middlebar .order-form .top-bars .boxes:first-child {
  margin-left: 0;
}
.middlebar .order-form .top-bars .boxes.two {
  background: #bf8036;
}
.middlebar .order-form .top-bars .boxes.four {
  background: #26c323;
}
.middlebar .order-form .top-bars .boxes.three {
  background: #cc0856;
}
.middlebar .order-form .top-bars .boxes .icon {
  font-size: 2.5em;
  color: #fff;
  -ms-flex-preferred-size: 40%;
  flex-basis: 40%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #3d8cdc;
}
.middlebar .order-form .top-bars .boxes.two .icon {
  background-color: #a96c24;
}
.middlebar .order-form .top-bars .boxes.three .icon {
  background-color: #a70747;
}
.middlebar .order-form .top-bars .boxes.four .icon {
  background-color: #10b10d;
}
.middlebar .order-form .top-bars .boxes .box-info {
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
  color: #fff;
  padding-left: 20px;
}
.middlebar .order-form .top-bars .boxes .box-info .number {
  margin-top: 20px;
  font-size: 1.5em;
  font-weight: normal;
}
.middlebar .order-form .top-bars .boxes .box-info .title {
  font-size: 0.95em;
}

.middlebar .order-form .income-wrap {
  width: 98%;
  margin: 1%;
  display: inline-block;
}
.middlebar .order-form .income-wrap .prfit-and-loss {
  width: 28%;
  height: 50vh;
  background: #fff;
  float: left;
  margin-right: 1%;
  border-radius: 4px;
  padding: 3% 2% 7% 2%;
  font-family: CoreSans45;
  -webkit-box-shadow: inset 1px 1px 5px 1px #d3d1d1;
  box-shadow: 1px 1px 5px 1px #d3d1d1;
}
.middlebar .order-form .income-wrap .prfit-and-loss h4 {
  font-weight: 500;
  width: 45%;
  float: left;
}
.middlebar .order-form .income-wrap .prfit-and-loss h5 {
  font-weight: 500;
  width: 55%;
  float: right;
  text-align: right;
}
.middlebar .order-form .income-wrap .prfit-and-loss h5 i {
  margin-left: 3%;
  cursor: pointer;
  opacity: 0.5;
}
.middlebar .order-form .income-wrap .prfit-and-loss h5 i:hover {
  opacity: 1;
}
.middlebar .order-form .income-wrap .prfit-and-loss .net-income-amount {
  margin-top: 10%;
  font-size: 2em;
  font-weight: bold;
}
.middlebar .order-form .income-wrap .prfit-and-loss .net-income-text {
  margin-top: 1%;
  font-size: 0.85em;
  font-weight: normal;
}
/**/
.middlebar .order-form .income-wrap .prfit-and-loss .profit {
  width: 100%;
  margin-top: 15%;
}
.middlebar .order-form .income-wrap .prfit-and-loss .profit-text {
  width: 20%;
  float: left;
}
.middlebar
  .order-form
  .income-wrap
  .prfit-and-loss
  .profit-text
  .profit-number {
  width: 100%;
  font-size: 1em;
  font-weight: bold;
}
.middlebar .order-form .income-wrap .prfit-and-loss .profit-text .txt {
  font-size: 0.75em;
  text-align: center;
}
.middlebar .order-form .income-wrap .prfit-and-loss .profit-range-bar {
  width: 78%;
  float: right;
  margin-top: 0;
  height: 25px;
  background-color: #dddddd;
  position: relative;
}
.middlebar
  .order-form
  .income-wrap
  .prfit-and-loss
  .profit-range-bar
  .profit-range {
  height: 25px;
  background-color: #10b10d;
  position: absolute;
}

.middlebar .order-form .income-wrap .prfit-and-loss .loss {
  width: 100%;
  margin-top: 35%;
}
.middlebar .order-form .income-wrap .prfit-and-loss .loss-text {
  width: 20%;
  float: left;
}
.middlebar .order-form .income-wrap .prfit-and-loss .loss-text .loss-number {
  width: 100%;
  font-size: 1em;
  font-weight: bold;
}
.middlebar .order-form .income-wrap .prfit-and-loss .loss-text .loss-txt {
  font-size: 0.75em;
  text-align: center;
}
.middlebar .order-form .income-wrap .prfit-and-loss .loss-range-bar {
  width: 78%;
  float: right;
  margin-top: 4px;
  height: 25px;
  background-color: #dddddd;
  position: relative;
}
.middlebar
  .order-form
  .income-wrap
  .prfit-and-loss
  .loss-range-bar
  .loss-range {
  height: 25px;
  background-color: #4f99e4;
  position: absolute;
}
.middlebar .order-form .income-wrap #barChart {
  height: 100px !important;
  width: 350px !important;
  margin-top: 10%;
}
/**/
.middlebar .order-form .income-wrap .expense {
  width: 28%;
  height: 50vh;
  background: #fff;
  float: left;
  margin-right: 1%;
  border-radius: 4px;
  padding: 3% 2% 7% 2%;
  font-family: CoreSans45;
  -webkit-box-shadow: inset 1px 1px 5px 1px #d3d1d1;
  box-shadow: 1px 1px 5px 1px #d3d1d1;
}
.middlebar .order-form .income-wrap .expense h4 {
  font-weight: 500;
  width: 45%;
  float: left;
}
.middlebar .order-form .income-wrap .expense h5 {
  font-weight: 500;
  width: 55%;
  float: right;
  text-align: right;
}
.middlebar .order-form .income-wrap .expense h5 i {
  margin-left: 3%;
  cursor: pointer;
  opacity: 0.5;
}
.middlebar .order-form .income-wrap .expense h5 i:hover {
  opacity: 1;
}
.middlebar .order-form .income-wrap .expense .net-expense-amount {
  margin-top: 10%;
  font-size: 2em;
  font-weight: bold;
}
.middlebar .order-form .income-wrap .expense .net-expense-text {
  margin-top: 1%;
  font-size: 0.85em;
  font-weight: normal;
}
/**/
.middlebar .order-form .income-wrap .pie-chart {
  width: 100%;
  height: 47%;
  /*border-bottom: 1px solid #eee;*/
  text-align: left;
}
.middlebar .order-form .income-wrap #pieChart {
  height: 180px !important;
  width: 180px !important;
  max-height: 180px !important;
  max-width: 180px !important;
  margin-top: 10%;
}
.middlebar .order-form .income-wrap .pie-info {
  float: right;
  width: 38%;
  margin-top: 15%;
  display: block;
}
.middlebar .order-form .income-wrap .pie-info p.expense-acc-money {
  margin-bottom: 5%;
  border-left: 15px solid #eee;
  height: 13px;
  line-height: 13px;
  font-size: 1em;
  font-family: CoreSans45;
  font-weight: bold;
  padding-left: 5%;
}
.middlebar .order-form .income-wrap .pie-info p:nth-child(1) {
  border-color: #036b51;
}
.middlebar .order-form .income-wrap .pie-info p:nth-child(3) {
  border-color: #08ae85;
}
.middlebar .order-form .income-wrap .pie-info p:nth-child(5) {
  border-color: #08e5ae;
}
.middlebar .order-form .income-wrap .pie-info p.expense-acc-money {
  font-weight: bold;
}
.middlebar .order-form .income-wrap .pie-info p.expense-acc-text {
  font-weight: normal;
  font-size: 0.85em;
  padding-left: 20%;
  margin-bottom: 20%;
}
/**/
.middlebar .order-form .income-wrap .sales {
  width: 28%;
  height: 50vh;
  background: #fff;
  float: left;
  margin-right: 1%;
  border-radius: 4px;
  padding: 3% 2% 7% 2%;
  font-family: CoreSans45;
  -webkit-box-shadow: inset 1px 1px 5px 1px #d3d1d1;
  box-shadow: 1px 1px 5px 1px #d3d1d1;
}
.middlebar .order-form .income-wrap .sales h4 {
  font-weight: 500;
  width: 45%;
  float: left;
}
.middlebar .order-form .income-wrap .sales h5 {
  font-weight: 500;
  width: 55%;
  float: right;
  text-align: right;
}
.middlebar .order-form .income-wrap .sales h5 i {
  margin-left: 3%;
  cursor: pointer;
  opacity: 0.5;
}
.middlebar .order-form .income-wrap .sales h5 i:hover {
  opacity: 1;
}
/*.middlebar .order-form .income-wrap .sales .sales-range-bar {
	width: 100%;
	float: left;
	top: 50%;
	right: 50%;
	height: 25px;
	background-color: #dddddd;
	position: relative;
	transform:rotate(270deg);
}
.middlebar .order-form .income-wrap .sales .sales-range-bar .sales-range {
	height: 25px;
	background-color: #4f99e4;
	position: absolute;
}*/
.middlebar .order-form .income-wrap .sales .sales-review {
  width: 33%;
  margin-top: 20%;
  margin-right: 20%;
  text-align: left;
}
.middlebar .order-form .income-wrap .sales .sales-amount {
  margin-top: 30%;
  font-size: 1.2em;
  font-weight: bold;
}
.middlebar .order-form .income-wrap .sales .sales-text {
  margin-top: 1%;
  font-size: 0.85em;
  font-weight: normal;
}
.middlebar .order-form .income-wrap #salesPieChart {
  height: 180px !important;
  width: 180px !important;
  max-height: 180px !important;
  max-width: 180px !important;
  float: right;
  display: block;
  top: 0;
  margin-top: -60%;
}
.middlebar .order-form .income-wrap #lineChart {
  height: 100px !important;
  width: 300px !important;
  margin-top: 7%;
}
/* --- */
.middlebar div.nextMBar,
.middlebar div.lastMBar {
  float: left;
  width: 97%;
  margin: 1% 1.5% 0;
}
.middlebar div.nextMBar {
  background: #ffffff;
  border: 1px solid #dddddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.middlebar div.nextMBar div#title {
  float: left;
  margin: 1.5% 2% 0 3%;
  /*font-family:raspoutine;*/
  font-size: 1.05em;
  color: #444444;
}
.middlebar div.nextMBar div#title ~ label {
  float: left;
  margin: 1.6% 0 0;
  font-size: 0.85em;
  color: #666666;
}
.middlebar div.nextMBar div#border {
  float: left;
  width: 94%;
  margin: 0.7% 0 0 3%;
  border-top: 1px solid #dedede;
}
.middlebar div.nextMBar div#chart,
.middlebar div.nextMBar div#hints {
  float: left;
  width: 46.2%;
  margin: 1% 0 2% 3%;
}
.middlebar div.nextMBar div#hints {
  float: right;
  margin: 1% 3% 0 0;
}
.middlebar div.nextMBar div#chart div#cinwan {
  float: left;
  width: 22%;
  min-height: 208px;
  background: #4b5155 url(../images/system/chart-bg.png) repeat-x;
}
.middlebar div.nextMBar div#chart div#graph {
  float: right;
  width: 78%;
  height: 208px;
  min-height: 208px;
  background: rgba(255, 255, 255, 0.5);
}

.middlebar div.nextMBar div#chart div#graph.dibadda {
  float: right;
  width: 78%;
  height: 208px;
  min-height: 208px;
  background: rgba(60, 171, 199, 0.5);
}
.middlebar div.nextMBar div#chart div#graph canvas {
  float: left;
  width: 90% !important;
  height: 90% !important;
  margin: 3% 5% 0;
  color: #fff;
}
.middlebar div.nextMBar div#chart div#currency {
  float: left;
  width: 100%;
  margin-top: 25%;
  font-size: 2.3em;
  color: #ffffff;
  text-align: center;
}
.middlebar div.nextMBar div#chart span {
  position: relative;
  top: -9px;
  right: 2px;
  font-size: 0.5em;
}
.middlebar div.nextMBar div#chart label,
.middlebar div.nextMBar div#hints div.hint label {
  float: left;
  width: 100%;
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}
.middlebar div.nextMBar div#hints div.hint {
  float: left;
  width: 48%;
  height: 97px;
  border: 1px solid #999;
  background: #8b5c4e url(../images/system/hint-shadow.png) left -3px no-repeat;
}
.middlebar div.nextMBar div#hints div.hint.one,
.middlebar div.nextMBar div#hints div.hint.two {
  margin-bottom: 2%;
}
.middlebar div.nextMBar div#hints div.hint.two,
.middlebar div.nextMBar div#hints div.hint.four {
  float: right;
}
.middlebar div.nextMBar div#hints div.hint.three {
  background-color: #f6a975;
}
.middlebar div.nextMBar div#hints div.hint.four {
  background-color: #f8c86d;
}
.middlebar div.nextMBar div.hint div#currency {
  float: left;
  width: 100%;
  margin-top: 9%;
  font-size: 2em;
  color: #ffffff;
  text-align: center;
  text-shadow: 1px 1px 1px #333;
}
.middlebar div.nextMBar div.hint div#currency span {
  position: relative;
  top: -5px;
  right: 2px;
  font-size: 0.7em;
}
.middlebar div.nextMBar div.hint label {
  font-size: 0.75em !important;
  text-shadow: 1px 1px 1px #000000;
}
/* --- */
.middlebar div.lastMBar div.box {
  float: left;
  width: 49.2%;
  min-height: 260px;
  background: #fff;
  border: 1px solid #dddddd;
}
.middlebar div.lastMBar div.box.right {
  float: right;
}
.middlebar div.lastMBar header {
  float: left;
  width: 94%;
  padding: 2% 0 2% 6%;
  font-size: 0.9em;
  color: #555555;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #dddddd;
}
.middlebar div.lastMBar div.box article {
  float: left;
  width: 100%;
  padding: 2% 0;
  height: 190px;
  overflow-y: auto;
}
.middlebar div.lastMBar div.box article #timeline {
  float: left;
  width: 88%;
  min-height: 50px;
  margin: 0 6% -0.1%;
  font-size: 0.9em;
  color: #444444;
  background: url(../images/system/timeline-bg.png) no-repeat;
}
.middlebar div.lastMBar div.box article #timeline label#time,
.middlebar div.lastMBar div.box article #timeline #details {
  float: left;
  width: 90%;
  margin: 0 0 0 7%;
}
.middlebar div.lastMBar div.box article #timeline label#time {
  margin: 0 0 0.5% 7%;
}
.middlebar div.lastMBar div.box article #timeline span {
  font-style: normal;
  font-weight: bold;
  color: #333333;
}
/* -- */
.middlebar div.lastMBar div.box article #title,
.middlebar div.lastMBar div.box article #record {
  float: left;
  width: 90%;
  margin: 0 0 2% 6%;
  padding: 1% 0;
  background: #ecbc8b;
}
.middlebar div.lastMBar div.box article #record {
  background: none;
  padding: 0;
  margin: 0 0 1.5% 6%;
}
.middlebar div.lastMBar div.box article div.cave {
  float: left;
  margin-left: 3%;
  font-size: 0.9em;
  font-weight: 600;
  color: #444444;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.middlebar div.lastMBar div.box article #record div.cave {
  font-weight: 500;
}
.middlebar div.lastMBar div.box article div.cave.short {
  width: 18%;
}
.middlebar div.lastMBar div.box article div.cave.middle {
  width: 25%;
}
.middlebar div.lastMBar div.box article div.cave.long {
  width: 45%;
}
.middlebar div.lastMBar div.box article p#noRecord {
  float: left;
  width: 100%;
  margin-top: 1%;
  font-size: 0.9em;
  text-align: center;
  color: #444444;
}
/* -- */
.dashboard div.bars {
  float: left;
  width: 96%;
  margin: 1% 2% 0;
}
.dashboard div.bars div.elements {
  float: left;
  width: 44%;
  margin-right: 1.5%;
  padding: 15px;
  background: #fff;
  border: 1px solid #bbb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.dashboard div.bars.top div.elements div.element {
  float: left;
  width: 33%;
}
.dashboard div.bars.top div.elements div.element:nth-child(-n + 3) {
  margin-bottom: 16px;
}
.dashboard div.bars.top div.elements div.element div.part {
  float: left;
  width: 30%;
  min-height: 40px;
}
.dashboard div.bars.top div.elements div.element div.part.right {
  float: right;
  width: 66%;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon {
  float: left;
  margin: 10px 0;
  width: 41px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  position: relative;
  background: #da350f;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon.green {
  background: #2bbb96;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon.bluesky {
  background: #17cad7;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon.blue {
  background: #0274c1;
}
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.pure-green {
  background: #66b31f;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon.orange {
  background: #d7981f;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon:before,
.dashboard div.bars.top div.elements div.element div.part div.hexagon:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon:before {
  top: -10px;
  border-bottom: 10px solid #da350f;
}
.dashboard div.bars.top div.elements div.element div.part div.hexagon:after {
  bottom: -10px;
  border-top: 10px solid #da350f;
}
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.bluesky:before,
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.bluesky:after {
  border-top-color: #17cad7;
  border-bottom-color: #17cad7;
}
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.green:before,
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.green:after {
  border-top-color: #2bbb96;
  border-bottom-color: #2bbb96;
}
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.pure-green:before,
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.pure-green:after {
  border-top-color: #66b31f;
  border-bottom-color: #66b31f;
}
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.blue:before,
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.blue:after {
  border-top-color: #0274c1;
  border-bottom-color: #0274c1;
}
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.orange:before,
.dashboard
  div.bars.top
  div.elements
  div.element
  div.part
  div.hexagon.orange:after {
  border-top-color: #d7981f;
  border-bottom-color: #d7981f;
}
.dashboard div.bars.top div.elements div.element div.part.right p {
  float: left;
  width: 90%;
  /*font-family: raspoutine;*/
  font-size: 0.95em;
  padding-left: 3%;
}
.dashboard div.bars.top div.elements div.element div.part.right p:nth-child(1) {
  margin-top: 5px;
}
.dashboard div.bars.top div.elements div.element div.part.right p:nth-child(2) {
  font-size: 0.85em;
  color: #888;
}
/* --- */
.dashboard div.bars.top div.notes {
  float: left;
  width: 50%;
}
.dashboard div.bars.top div.notes div.note {
  float: left;
  width: 18%;
  height: 136px;
  margin-right: 15px;
  background-color: #fff;
  border: 1px solid #aaa;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.dashboard div.bars.top div.notes div.part {
  float: left;
  width: 100%;
  text-align: center;
}
.dashboard div.bars.top div.notes div.part.top {
  height: 46px;
  line-height: 46px;
  color: #fff;
  font-size: 1.4em;
  background-color: #389cdf;
  border-bottom: 1px solid #aaa;
}
.dashboard div.bars.top div.notes div.note:nth-child(even) div.part.top {
  background-color: #17cad7;
}
.dashboard div.bars.top div.notes div.part.top div.imgBox {
  float: left;
  width: 100%;
  height: 28px;
  margin-top: 10px;
  background-color: #f00;
  background: url(../images/system/dash-top-bars.png) center -57px no-repeat content-box;
  background-size: 38px;
}
.dashboard div.bars.top div.notes div.part.top div.imgBox.expense {
  background-position: center -29px;
}
.dashboard div.bars.top div.notes div.part.top div.imgBox.net {
  background-position: center top;
}
.dashboard div.bars.top div.notes div.note p {
  float: left;
  width: 100%;
  position: relative;
}
.dashboard div.bars.top div.notes div.note p:nth-child(1) {
  /*font-family: raspoutine;*/
  font-size: 0.95em;
  font-weight: 600;
  margin-top: 14px;
}
.dashboard div.bars.top div.notes div.note p:nth-child(2) {
  margin-top: 2px;
  font-size: 0.8em;
  color: #777;
  font-weight: 600;
}
.dashboard div.bars.top div.notes div.note p span {
  position: absolute;
  top: -2px;
  margin-left: -8px;
  font-size: 0.9em;
  font-weight: 500;
}
/* -- */
.dashboard div.bars div.box {
  float: left;
  width: 49.2%;
  height: 200px;
  min-height: 240px;
  background: #fff;
  border: 1px solid #bbb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: auto;
}
.dashboard div.bars div.box.money {
  width: 44%;
  text-align: center;
}
.dashboard div.bars div.box.projects {
  width: 35%;
  margin-left: 1.5%;
}
.dashboard div.bars div.box.receivable {
  width: 18%;
  margin-left: 1.5%;
  padding-top: 20px;
  text-align: center;
}
.dashboard div.bars.bottom div.box {
  margin-bottom: 3%;
}
.dashboard div.bars.bottom div.box.right {
  float: right;
}
.dashboard div.bars div.box.money #areaChart {
  width: 94% !important;
  height: 80% !important;
  margin: 4% 0 0 1%;
}
/* --- */
.dashboard div.bars div.box h3 {
  float: left;
  position: relative;
  width: 100%;
  padding-left: 25px;
  height: 44px;
  line-height: 44px;
  /*font-family: raspoutine;*/
  font-size: 0.9em;
  color: #454545;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.dashboard div.bars div.box h3 a.addNew {
  position: absolute;
  top: 5.5px;
  right: 20px;
  width: 28px;
  height: 28px;
  line-height: 24px;
  color: #fff;
  font-family: leelawadee;
  font-size: 1.7em;
  font-weight: 600;
  text-align: center;
  background-color: #3a2621;
  text-decoration: none;
}
.dashboard div.bars div.box h3 a.addNew:hover {
  background-color: #035993;
}
.dashboard div.bars div.box.receivable p {
  float: left;
  width: 70%;
  margin-left: 15%;
  text-align: center;
}
.dashboard div.bars div.box.receivable p.title {
  font-weight: 600;
}
.dashboard div.bars div.box.receivable p.title:nth-child(2) {
  margin-bottom: 15px;
}
.dashboard div.bars div.box.receivable p.total {
  margin-top: 10px;
}
.dashboard div.bars div.box.receivable p.amount {
  font-weight: 600;
  color: #0274c1;
}
/* --- */
.dashboard div.bars article {
  float: left;
  width: 100%;
}
.dashboard div.bars article div.record {
  float: left;
  width: 100%;
  padding: 0 25px;
  height: 28px;
  line-height: 28px;
  border-bottom: 1px dotted #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.dashboard div.bars article .header {
  background: #f1f6f4;
}
.dashboard div.bars article p#noRecord {
  float: left;
  width: 100%;
  margin-top: 4%;
  font-size: 0.85em;
  text-align: center;
  font-style: italic;
  color: #555;
}
.dashboard div.bars.bottom article p#noRecord {
  margin-top: 3%;
}
/* --- */
.dashboard div.bars div.box article div.record > div {
  float: left;
  font-size: 0.82em;
  height: 30px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #555;
}
.dashboard div.bars div.box article div.record.header > div {
  color: #333;
  font-weight: 600;
}
.dashboard div.bars div.box article div.record div.short {
  width: 16%;
}
.dashboard div.bars div.box article div.record div.xxshort {
  width: 20%;
}
.dashboard div.bars div.box article div.record div.middle {
  width: 28%;
}
.dashboard div.bars div.box article div.record div.xxmiddle {
  width: 35%;
}
/* --- */
.middlebar div.positionBar {
  float: left;
  width: 96%;
  height: 36px;
  line-height: 36px;
  padding: 0 2%;
  color: #444;
  background: #fff;
  overflow: hidden;
}
.middlebar div.positionBar i {
  position: relative;
  top: 2px;
  font-size: 1.05em;
  color: #666;
}
.middlebar div.positionBar label {
  position: relative;
  width: 70%;
  left: 10px;
  font-size: 0.9em;
  overflow: hidden;
}
.middlebar div.contentBar {
  float: left;
  width: 100%;
}

/* ----------------------------------------------------------- */
/* ------------------------ unknown -------------------------- */
/* ----------------------------------------------------------- */
div.unknown {
  float: left;
  width: 97%;
  margin: 1% 1.5%;
  min-height: 230px;
  background: #fff url(../images/system/oops.png) 94% 10px no-repeat;
  font-family: leelawadee;
}
div.unknown h3,
div.unknown p,
div.unknown ul {
  float: left;
  width: 90%;
  margin: 1% 2% 0;
}
div.unknown h3 {
  font-size: 1.35em;
}
div.unknown ul {
  margin: 0.5% 0 1% 4%;
}
div.unknown p,
div.unknown ul li {
  line-height: 21px;
  font-size: 0.95em;
}

/* ----------------------------------------------------------- */
/* ------------------------ load page ------------------------ */
/* ----------------------------------------------------------- */
div.workplace #loadPage {
  float: left;
  width: 96%;
  margin: 1% 2%;
}
div.workplace #loadPage #command,
div.workplace #loadPage #dynamicQnd {
  float: left;
  width: 96%;
  padding: 1% 2%;
  border: 1px dotted #999;
  background: #fff;
}
div.workplace #loadPage #dynamicQnd::after {
  content: "";
  clear: both;
  display: table;
}
div.workplace #loadPage #command {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
div.workplace #loadPage #dynamicQnd {
  margin: 1% 0;
}
div.workplace #loadPage #dynamicQnd.transparent {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
div.workplace #loadPage #command #searchBox {
  float: left;
  width: 65%;
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}
div.workplace #loadPage #command #searchBox.large {
  width: 75%;
}
div.workplace #loadPage #command .buttons {
  float: right;
  width: 30%;
}
div.workplace #loadPage #command .buttons.spec {
  width: 35%;
}
div.workplace #loadPage #command #searchBox input.srchInput {
  float: left;
  width: 100%;
  padding-left: 1%;
  height: 30px;
  background: url(../images/system/bg-search.png) 10px no-repeat;
  border: 1px solid #ccc;
  background-position: 97%;
}
div.workplace #loadPage #command #searchBox.hasParams input.srchInput {
  width: 50%;
  margin-right: 10px;
}
div.workplace #loadPage #command #searchBox.hasParams select {
  width: 20%;
  margin-right: 15px;
}
div.workplace #loadPage #command #searchBox.hasParams button {
  /*font-family: raspoutine;*/
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 1px 1px 1px #000;
  background: #057e7c;
  /*background-image: -webkit-linear-gradient(top, #057e7c, #e59125);
    background-image: -moz-linear-gradient(top, #057e7c, #e59125);
    background-image: -ms-linear-gradient(top, #057e7c, #e59125);
    background-image: -o-linear-gradient(top, #057e7c, #e59125);
    background-image: linear-gradient(to bottom, #057e7c, #e59125);*/
  border: 1px solid #057e7c;
  padding: 6px;
  width: 15%;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
  outline: none;
  background: #015958;
  border-color: #015958;
}
div.workplace #loadPage #command #searchBox.hasParams button:hover {
  /*background-image: -webkit-linear-gradient(top, #e59125, #057e7c);
    background-image: -moz-linear-gradient(top, #e59125, #057e7c);
    background-image: -ms-linear-gradient(top, #e59125, #057e7c);
    background-image: -o-linear-gradient(top, #e59125, #057e7c);
    background-image: linear-gradient(to bottom, #e59125, #057e7c);*/
  background: #1daba9;
  border-color: #015958;
}

div.workplace #loadPage #command #searchBox input.srchInput.xxlarge {
  width: 70%;
}
div.workplace #loadPage #command #searchBox input.srchInput.large {
  width: 48%;
}
div.workplace #loadPage #command #searchBox input.srchInput.medium {
  width: 25%;
}
div.workplace #loadPage #command #searchBox input.srchInput.small {
  width: 20%;
}
div.workplace #loadPage #command #searchBox input.srchInput.no-backgound {
  padding-left: 10px;
  height: 28px;
  background: none;
}
div.workplace #loadPage #command #searchBox select {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}
div.workplace #loadPage #command #searchBox .second {
  margin-left: 10px;
}
div.workplace #loadPage #command #searchBox input.srchInput:focus {
  outline: none;
  background-color: #eefaeb;
}
div.workplace #loadPage #command #searchBox div.options {
  float: right;
  width: 46%;
}
div.workplace #loadPage #command #searchBox.large div.options {
  width: 50%;
}
div.workplace #loadPage #command #searchBox div.options div.option {
  float: left;
  padding-right: 4%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.workplace #loadPage #command #searchBox div.options input[type="radio"] {
  float: left;
  margin: 1px 6px 0 2px;
  -ms-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
div.workplace #loadPage #command #searchBox div.options span {
  float: left;
  line-height: 30px;
  color: #333;
  font-size: 0.85em;
  cursor: pointer;
}
div.workplace #loadPage div.buttons a.btnAddNew {
  float: right;
  padding: 1% 6%;
  font-size: 0.9em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: inherit;
}
div.workplace #loadPage div.buttons a.btnAddNew.download {
  width: 50%;
  text-align: center;
  background: none;
  background-color: rgba(25, 150, 25, 1);
  border: none;
  outline: none;
}
div.workplace #loadPage div.buttons a.btnAddNew.download:hover {
  background-color: rgba(25, 150, 25, 0.7);
}
div.workplace #loadPage div.buttons a.btnAddNew.download i {
  margin: 1% 10% 0 0;
  font-size: 1.2em;
}
/* --- */
div.workplace #loadPage #dynamicQnd #foundNum {
  float: left;
  width: 62.7%;
  margin: 0 0 1%;
  padding: 0.5% 1%;
  font-size: 0.9em;
  background: #edfeee;
  border: 1px dotted #49f552;
}
div.workplace #loadPage #dynamicQnd #foundNum span#refresh {
  position: relative;
  left: 20px;
}
div.workplace #loadPage #dynamicQnd #foundNum span#refresh a {
  color: #f00;
  text-decoration: underline;
  cursor: pointer;
  -webkit-animation: blinker is linear infinite;
  animation: blinker is linear infinite;
}
div.workplace #loadPage #dynamicQnd #filters {
  float: right;
  width: 35%;
  margin: 0 0 1%;
}
div.workplace #loadPage #dynamicQnd #filters > div {
  float: left;
  width: 50%;
}
div.workplace #loadPage #dynamicQnd #filters label {
  float: left;
  width: 45%;
  margin-top: 3.5%;
  text-align: right;
  font-size: 0.9em;
  color: #444;
}
div.workplace #loadPage #dynamicQnd #filters select {
  float: right;
  width: 51%;
  height: 30px;
  padding-left: 6px;
  color: #444;
  font-size: 0.8em;
  border: 1px solid #bbb;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}
div.workplace #loadPage #dynamicQnd #filters select:focus {
  outline: none;
  background-color: #eefaeb;
}
/* --- */
div.workplace #loadPage #dynamicQnd #dataTable {
  position: relative;
  float: left;
  width: 99.8%;
  margin: 0 0 2%;
  border-top: 1px dotted #999;
}
div.workplace #loadPage #dynamicQnd.transparent #dataTable {
  background-color: #fff;
  min-height: 1px;
}
div.workplace #loadPage button.btnSubmit {
  float: right;
  padding: 8px 40px;
}
div.workplace #loadPage button.btnSubmit span {
  position: relative;
  margin-left: 5px;
  font-family: leelawadee;
  font-size: 0.9em;
}
div.workplace #loadPage button.btnSubmit span::before {
  content: "(";
}
div.workplace #loadPage button.btnSubmit span::after {
  content: ")";
}
div.workplace #loadPage .table-wrapper div#loading,
div.workplace div.twoCols div.dynamicData #loading {
  float: left;
  width: 100%;
  margin: 1% 0 0;
  text-align: center;
  height: 20px;
  display: none;
}
div.workplace div.twoCols div.dynamicData #loading {
  margin: 2% 0 0;
}
div.workplace #loadPage .table-wrapper div#loading::before,
div.workplace div.twoCols div.dynamicData #loading::before {
  content: "loading";
  color: #555;
  font-style: italic;
}
div.workplace #loadPage .table-wrapper div#loading::after,
div.workplace div.twoCols div.dynamicData #loading::after {
  content: url(../images/system/loading.gif);
  padding-left: 1%;
}
div.workplace div.twoCols div.dynamicData #loading::after {
  padding-left: 2%;
}
div.workplace #loadPage p#noRecords {
  float: left;
  width: 100%;
  margin: .5% 0;
  font-size: 0.9em;
  text-align: center;
  color: #666;
}
div.workplace div.theForm p#noRecords {
  float: left;
  width: 100%;
  margin: 0;
  font-size: 0.9em;
  text-align: center;
  color: #666;
  border-bottom: 1px dotted #ccc;
  padding: 3% 0;
  text-transform: capitalize;
}
div.workplace #loadPage #dataTable div.record {
  float: left;
  width: 100%;
  font-size: 0.83em;
  border: 1px dotted #999;
  border-top: none;
}
div.workplace #loadPage #dataTable div.record:nth-child(even) {
  background: #f3f3f3;
}
div.workplace #loadPage #dataTable div.record.header {
  color: #ffffff;
  background: #c4e8ec;
  color: #383b40 !important;
  font-weight: bold;
}
div.workplace #loadPage #dataTable div.record.suspended:after {
  position: absolute;
  right: -2px;
  content: "";
  width: 7px;
  height: 32px;
  background-color: #ff8000;
}
div.workplace #loadPage #dataTable div.cave {
  position: relative;
  float: left;
  width: auto;
  height: 30px;
  line-height: 30px;
  margin-left: 1%;
  padding-left: 1%;
  border-left: 1px dotted #999;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.workplace #loadPage #dataTable #record.header div.cave {
  height: 32px;
  line-height: 32px;
}
div.workplace #loadPage #dataTable #record.header div.cave {
  border-left: 1px dotted #fff;
}
div.workplace #loadPage #dataTable div.cave:first-child {
  border-left: none !important;
  margin: 0;
}
div.workplace #loadPage #dataTable div.cave.button {
  width: 8%;
}
div.workplace #loadPage #dataTable div.cave.serial {
  width: 4%;
}
div.workplace #loadPage #dataTable div.cave.tiny {
  width: 6%;
}
div.workplace #loadPage #dataTable div.cave.short {
  width: 7%;
}
div.workplace #loadPage #dataTable div.cave.mshort {
  width: 8%;
}
div.workplace #loadPage #dataTable div.cave.lshort {
  width: 10%;
}
div.workplace #loadPage #dataTable div.cave.smiddle {
  width: 12%;
}
div.workplace #loadPage #dataTable div.cave.mmiddle {
  width: 14%;
}
div.workplace #loadPage #dataTable div.cave.middle {
  width: 16%;
}
div.workplace #loadPage #dataTable div.cave.xmiddle {
  width: 20%;
}
div.workplace #loadPage #dataTable div.cave.lmiddle {
  width: 24%;
}
div.workplace #loadPage #dataTable div.cave.xlmiddle {
  width: 30%;
}
div.workplace #loadPage #dataTable div.cave.long {
  width: 35%;
}
div.workplace #loadPage #dataTable div.cave.vlong {
  width: 45%;
}
div.workplace #loadPage #dataTable div.cave p {
  float: left;
  width: 98%;
  margin: 1% 0;
  line-height: normal;
}
div.workplace #loadPage #dataTable .button a {
  margin-right: 5%;
  width: 19px;
  height: 14px;
  line-height: 30px;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.5;
  filter: alpha(opacity=50);
  display: inline-block;
}
div.workplace #loadPage #dataTable .button a:last-of-type {
  margin-right: 0%;
}
div.workplace #loadPage #dataTable .button a.fa {
  width: auto;
  line-height: 34px;
  font-size: 1.2em;
  color: #666;
}
div.workplace #loadPage #dataTable .button a.showtitle {
  width: auto;
  padding-left: 20px;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
div.workplace #loadPage #dataTable div.cave a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
div.workplace #loadPage #dataTable div.cave span {
  float: left;
  margin-top: 5px;
  margin-right: 5px;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  border: 1px solid #ccc;
}
div.workplace #loadPage #dataTable div.cave span.payable {
  background-color: #f00;
  border-radius: 4px;
  color: #fff;
}
div.workplace #loadPage #dataTable div.cave span.receivable {
  background-color: #00a65a;
  border-radius: 4px;
  color: #fff;
}
div.workplace #loadPage #dataTable a.view {
  background: url(../images/system/b_view.png) left center no-repeat;
}
div.workplace #loadPage #dataTable a.update {
  background: url(../images/system/b_edit.png) left center no-repeat;
}
div.workplace #loadPage #dataTable a.create_user {
  background: url(../images/system/b_user.png) left center no-repeat;
}
div.workplace #loadPage #dataTable a.delete {
  background: url(../images/system/b_delete.png) left center no-repeat;
}
div.workplace #loadPage #dataTable a.transfer {
  background: url(../images/system/b_transfer.png) left center no-repeat;
}
div.workplace #loadPage #dataTable div.cave.button a.depreciate {
  background: url(../images/system/b_minus.png) left center no-repeat;
}
div.workplace #loadPage #dataTable div.cave.button a.payment {
  background: url(../images/system/b_payment.png) left center no-repeat;
}
div.workplace #loadPage #dataTable .button a.approve {
  background: url(../images/system/b_approve.png) left center no-repeat;
}
div.workplace #loadPage #dataTable a.change {
  float: right;
  margin-right: 5%;
  width: 16px;
  height: 16px;
  line-height: 30px;
  cursor: pointer;
  text-decoration: none;
  background: url(../images/system/b_edit.png) left center no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
div.workplace #loadPage #dataTable a.change:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
div.workplace #loadPage #dataTable a#return {
  background: url(../images/system/b_undo.png) no-repeat;
}
div.workplace #loadPage #dataTable a#refund::before {
  font-family: FontAwesome;
  content: "\f0e2";
  font-size: 1.2em;
}
/* -- */
div.workplace #loadPage #dataTable div.cave span.number {
  position: relative;
  float: right;
  right: 0;
  width: 18px;
  height: 18px;
  line-height: 15px;
  text-align: center;
  font-size: 0.7em;
  border-radius: 99em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
  border: 1px solid #666;
  background-color: #fff;
}
div.workplace #loadPage #dataTable div.cave span.number.second {
  margin-right: 3px;
}
div.workplace #loadPage #dataTable div.cave span.number.red {
  color: #fff;
  border: 1px solid #f00;
  background-color: rgba(255, 0, 0, 0.5);
}
div.workplace #loadPage #dataTable div.cave span.number.green {
  color: #fff;
  border: 1px solid #008000;
  background-color: rgba(0, 128, 0, 0.6);
}
div.workplace #loadPage #dataTable div.cave input[type="checkbox"] {
  float: left;
  margin: 9px 8px 0 2px;
  -webkit-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}
div.workplace #loadPage #dataTable div.cave input[type="checkbox"] + span {
  float: left;
  margin-top: 1px;
  color: #3055b5;
  cursor: pointer;
}
div.workplace #loadPage div.uploadExcel {
  width: 100%;
  height: 25%;
  padding-top: 3%;
  clear: both;
}
div.workplace #loadPage div.uploadExcel a {
  width: 100%;
  height: 30%;
  padding: 1%;
  background-color: #3a2621;
  border-radius: 4px;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
div.workplace #loadPage div.uploadExcel a:hover {
  background-color: #057e7c;
}
div.workplace #loadPage div.uploadExcel a i {
  margin-right: 1%;
}
/* --- */
#dsplyMore {
  -webkit-box-shadow: inset 0 1px 0 0 #fff;
  box-shadow: inset 0 1px 0 0 #fff;
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
  background-color: #ededed;
  border: 1px solid #dcdcdc;
  text-shadow: 0 1px 0 #fff;
}
#dsplyMore:hover {
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background: -moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background: -webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background: -o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
  background-color: #dfdfdf;
}
#dsplyMore {
  float: left;
  width: 20%;
  margin: 2% 1% 2% 40%;
  min-height: 30px;
  line-height: 30px;
  color: #555555;
  font-size: 0.8em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #bbb;
}
div.twoCols #dsplyMore {
  width: 30%;
  margin: 2% 1% 2% 35%;
}
#dsplyMore:after {
  content: "See More";
}
.noneLink {
  display: none;
}
#no_more {
  float: left;
  width: 50%;
  margin: 2% 25%;
  min-height: 36px;
  text-align: center;
}
/* --- two Cols --- */
div.workplace div.twoCols {
  float: left;
  width: 49%;
  background: #fff;
  border: 1px solid #ccc;
}
div.workplace div.twoCols:nth-child(even) {
  float: right;
}
div.workplace div.twoCols.second {
  margin-top: 1.2%;
}
div.workplace div.twoCols.long {
  width: 100%;
}
div.workplace div.twoCols header {
  float: left;
  width: 100%;
  height: 33px;
  line-height: 33px;
  padding: 0 3%;
  color: #333;
  /*font-family: raspoutine;*/
  background: #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.twoCols.long header {
  padding: 0 1.8%;
}
div.workplace div.twoCols header span {
  position: relative;
  font-weight: normal;
  letter-spacing: -0.5px;
  margin-left: 3% !important;
}
.popupBody label.addNew,
div.workplace div.theForm label.addNew,
div.workplace div.showRecord label.addNew,
div.workplace div.twoCols header a#addnew,
div.workplace div.twoCols header label.addnew {
  margin-left: 10px;
  width: 16px;
  height: 31px;
  line-height: 31px;
  color: #015958;
  cursor: pointer;
  text-decoration: none;
}
.popupBody label.addNew,
div.workplace
  div.theForm
  label.addNew
  div.workplace
  div.shoeRecord
  label.addNew {
  margin-left: 7px;
}
.popupBody label.addNew:before,
div.workplace div.theForm label.addNew:before,
div.workplace div.showRecord label.addNew,
div.workplace div.twoCols header a#addnew:before,
div.workplace div.twoCols header label.addnew:before {
  font-family: FontAwesome;
  content: "\f067";
  font-size: 1.2em;
}
div.workplace div.theForm label.addNew.identity:before {
  font-family: FontAwesome;
  content: "\f2c3";
  font-size: 1.2em;
  color: #666;
}
div.workplace div.twoCols header a#addnew,
div.workplace div.twoCols header label.addnew {
  float: right;
  height: 33px;
  line-height: 33px;
}
div.workplace div.twoCols div#searchBox {
  float: left;
  width: 94%;
  margin: 1.5% 3%;
}
div.workplace div.twoCols.long div#searchBox {
  width: 96.4%;
  margin: 0.8% 1.8%;
}
div.workplace div.twoCols div#searchBox input.srchInput {
  float: left;
  width: 100%;
  padding-left: 7%;
  height: 30px;
  background: url(../images/system/bg-search.png) 10px no-repeat;
  border: 1px solid #ccc;
}
div.workplace div.twoCols div#searchBox input.srchInput.firefox {
  width: 92.5%;
}
div.workplace div.twoCols.long div#searchBox input.srchInput {
  padding-left: 3.5%;
}
div.workplace div.twoCols div#searchBox input.srchInput:focus {
  outline: none;
  background-color: #eefaeb;
  border: 1px solid #aaa;
}
/* --- */
.popupBody div.suggest,
div.workplace div.suggest {
  /*position: fixed;*/
  position: absolute;
  /*top: 40px;*/
  width: 350px;
  height: auto;
  max-height: 200px;
  background: #fff;
  border: 1px solid #bbb;
  display: none;
  z-index: 100;
  overflow-y: auto;
  top: 105%;
}
div.suggest div#time {
  padding: 5px 10px  !important;
}
div.workplace div.twoCols div.suggest {
  width: 44%;
}
.popupBody div.suggest.jumbo,
div.workplace div.suggest.jumbo {
  width: 100%;
}
.popupBody div.suggest.large,
div.workplace div.suggest.large {
  width: 60%;
}
.popupBody div.suggest.medium,
div.workplace div.suggest.medium {
  width: 50%;
}
.popupBody div.suggest.vmedium,
div.workplace div.suggest.vmedium {
  width: 42%;
}
.popupBody div.suggest.xsmall,
div.workplace div.suggest.xsmall {
  width: 40%;
}
.popupBody div.suggest.small,
div.workplace div.suggest.small {
  width: 27%;
}
.popupBody div.suggest div#time,
div.workplace div.suggest div#time {
  float: left;
  width: 100%;
  padding: 5px 15px;
  height: auto;
  min-height: 26px;
  font-size: 0.9em;
  border-bottom: 1px dotted #bbb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody div.suggest div#time:hover,
div.workplace div.suggest div#time:hover {
  background: #efefef;
  cursor: pointer;
}
.popupBody div.suggest div#time p,
div.workplace div.suggest div#time p {
  float: left;
  width: 100%;
  padding: 1px;
  color: #333;
  font-style: italic;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.popupBody div.suggest div#time p span,
div.workplace div.suggest div#time p span {
  color: #000;
}
.popupBody div.suggest p#notFound,
div.workplace div.suggest p#notFound {
  float: left;
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 0.85em;
  color: #666;
  font-style: italic;
  text-align: center;
}
/* --- */
div.workplace div.twoCols div.dynamicData {
  position: relative;
  float: left;
  width: 93.4%;
  margin: 0 3% 2%;
  height: 370px;
  overflow-y: auto;
  border: 1px dotted #999;
}
div.workplace div.twoCols.long div.dynamicData {
  width: 96.2%;
  margin: 0 1.8% 1%;
  height: 250px;
}
div.workplace div.twoCols.middle div.dynamicData {
  height: 220px;
}
div.workplace div.twoCols.short div.dynamicData {
  height: 150px;
}
div.workplace div.twoCols div.dynamicData div.record {
  float: left;
  width: 96%;
  height: 32px;
  line-height: 32px;
  padding: 0 2%;
  font-size: 0.9em;
  border-bottom: 1px dotted #ccc;
}
div.workplace div.twoCols div.dynamicData div.record:nth-child(odd) {
  background: #f3f3f3;
}
div.workplace div.twoCols div.dynamicData div.record.suspended:after {
  position: absolute;
  right: 0;
  content: "";
  width: 7px;
  height: 32px;
  background-color: #ff8000;
}
div.workplace div.twoCols div.record div#batono {
  float: left;
  width: 17%;
  margin-left: 2%;
}
div.workplace div.twoCols div.record.long div#batono {
  width: 15%;
  margin-left: 0%;
}
div.workplace div.twoCols div.record label {
  float: left;
  width: 14%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.workplace div.twoCols div.record.short label:nth-child(2) {
  width: 55%;
}
div.workplace div.twoCols div.record.short label:nth-child(3) {
  width: 25%;
}
div.workplace div.twoCols div.record label.margin-left {
  margin-left: 1%;
}
div.workplace div.twoCols div.record label.xlarge {
  width: 70%;
}
div.workplace div.twoCols div.record label.large {
  width: 45%;
}
div.workplace div.twoCols div.record.long label.xxmiddle {
  width: 37%;
}
div.workplace div.twoCols div.record.long label.xmiddle {
  width: 31%;
}
div.workplace div.twoCols div.record.long #batono ~ label.xmiddle {
  width: 23%;
}
div.workplace div.twoCols div.record.long label.middle {
  width: 23.5%;
}
div.workplace div.twoCols div.record.long label.short {
  width: 10%;
}
div.workplace div.twoCols div.record label span.colorise {
  border: 1px solid #ccc;
  padding: 2px 10px;
}
div.workplace div.twoCols div#batono a,
div.workplace div.twoCols div#batono label {
  float: left;
  width: 16px;
  height: 32px;
  margin-right: 10px;
  cursor: pointer;
}
div.workplace div.twoCols div#batono a#view {
  background: url(../images/system/b_view.png) left center no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
div.workplace div.twoCols div#batono a#change {
  background: url(../images/system/b_edit.png) left center no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
div.workplace div.twoCols div#batono a#delete {
  background: url(../images/system/b_delete.png) left center no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
div.workplace div.twoCols div#batono #duplicate {
  background: url(../images/system/b_duplicate.png) left center no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

div.workplace div.twoCols div#batono a#change:hover,
div.workplace div.twoCols div#batono #duplicate:hover,
div.workplace div.twoCols div#batono a#delete:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
div.workplace div.twoCols div.record label#cinwan a {
  color: #333;
  cursor: pointer;
}
div.workplace div.twoCols label#sumada span#suspended {
  padding: 0 3% 0 1%;
  color: #fff;
  background: #ff8000;
}
div.workplace div.twoCols p#noRecords {
  float: left;
  width: 100%;
  margin: 2% 0;
  font-size: 0.95em;
  text-align: center;
  color: #666;
}

/* --------- sheves -------- */
div.workplace div.shelf-wrap {
  float: left;
  width: 99.9%;
  font-size: 0.95em;
  border-bottom: none;
}
div.workplace div.shelf-wrap .title {
  float: left;
  min-width: 20%;
  margin-bottom: 10px;
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  /*font-family: raspoutine;*/
  color: #333;
  font-weight: 600;
  background: #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.shelf-wrap .boxes-wrap {
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.shelf-wrap .box {
  position: relative;
  float: left;
  min-width: 20%;
  height: 180px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px dotted #999;
  background-color: #f9f9f9;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.shelf-wrap .box label.boxName {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 33px;
  line-height: 33px;
  text-align: center;
  /*font-family: raspoutine;*/
  font-size: 0.9em;
  background: #f3f3f3;
  border-top: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.shelf-wrap .box label.addnew {
  float: left;
  width: 100%;
  height: 178px;
  text-align: center;
  color: #3055b5;
  background: #f5f5f5;
  cursor: pointer;
}
div.workplace div.shelf-wrap .box label.addnew i {
  float: left;
  width: 100%;
  margin-top: 75px;
  font-size: 1.2em;
}
div.workplace div.shelf-wrap .box label.addnew span {
  float: left;
  width: 100%;
  margin-top: 10px;
}
div.workplace div.shelf-wrap .box div.folderWrap {
  position: relative;
  float: left;
  width: 100%;
  height: 148px;
  padding: 18px 10px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.shelf-wrap .box div.folderWrap label.folder {
  position: relative;
  float: left;
  width: 34px;
  height: 100%;
  margin-left: 2px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
div.workplace div.shelf-wrap .box div.folderWrap label.folder.new span::before {
  position: relative;
  left: -7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f067";
}
div.workplace div.shelf-wrap .box div.folderWrap label.folder span {
  position: absolute;
  width: 175px;
  display: inline-block;
  left: -72px;
  font-size: 0.9em;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/* --- load archives -- */
div.workplace #loadPage .noteTypes {
  float: left;
  width: 100%;
  margin: 1% 0;
}
div.workplace #loadPage .noteTypes p#noRecords {
  float: left;
  width: 100%;
  height: 50px;
  padding: 15px 0;
  font-size: 0.9em;
  text-align: center;
  color: #666;
  background: #fff;
}
div.workplace #loadPage .noteTypes div.noteType {
  float: left;
  width: 32%;
  margin-bottom: 1.5%;
  font-size: 0.95em;
  background: #fff;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace #loadPage .noteTypes div.noteType:nth-child(3n + 2) {
  margin-left: 2%;
}
div.workplace #loadPage .noteTypes div.noteType:nth-child(3n + 3) {
  float: right;
}
/* --- */
div.workplace #loadPage .noteTypes div.noteType header {
  float: left;
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding: 0 23px;
  background: #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.workplace #loadPage .noteTypes div.noteType article {
  float: left;
  width: 100%;
  height: 300px;
  overflow-y: auto;
}
div.workplace #loadPage .noteTypes div.noteType article div.record {
  float: left;
  width: 100%;
  padding: 10px 23px;
  border-bottom: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace #loadPage .noteTypes div.noteType article div.record p {
  float: left;
  width: 100%;
  margin-bottom: 3px;
  line-height: 20px;
}
div.workplace #loadPage .noteTypes div.noteType article div.record p.bold {
  font-weight: 600;
}
/* -- catch archive -- */
div.workplace #loadPage .noteTypes div.record {
  float: left;
  width: 100%;
  font-size: 0.85em;
  border: 1px dotted #999;
  border-top: none;
  background: #fff;
}
div.workplace #loadPage .noteTypes div.record.header {
  color: #fff;
  background: #666;
}
div.workplace #loadPage .noteTypes div.cave {
  float: left;
  width: auto;
  height: 32px;
  line-height: 32px;
  margin-left: 1%;
  padding-left: 1%;
  border-left: 1px dotted #999;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.workplace .record.header {
  background-color: #f7f7f7;
}
div.workplace #loadPage .noteTypes #record.header div.cave {
  height: 34px;
  line-height: 34px;
}
div.workplace #loadPage .noteTypes #record.header div.cave {
  border-left: 1px dotted #fff;
}
div.workplace #loadPage .noteTypes div.cave:first-child {
  border-left: none !important;
  margin: 0;
}
div.workplace #loadPage .noteTypes div.cave.lmiddle {
  width: 24%;
}
div.workplace #loadPage .noteTypes div.cave.vlong {
  width: 45%;
}
div.workplace #loadPage .noteTypes div.cave p {
  float: left;
  width: 98%;
  margin: 1% 0;
  line-height: normal;
}
div.workplace .theForm #btnDisplayMore,
div.workplace .showRecord #btnDisplayMore,
div.workplace #loadPage #btnDisplayMore {
  float: left;
  width: 20%;
  margin: 2% 1% 2% 40%;
  min-height: 32px;
  color: #555555;
  font-size: 0.8em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
div.workplace .theForm #btnDisplayMore,
div.workplace .showRecord #btnDisplayMore,
div.workplace #loadPage #btnDisplayMore {
  width: 30%;
  margin: 3% 1% 2% 35%;
}
/* ----------------------------------------------------------- */
/* ------------------------- the form ------------------------ */
/* ----------------------------------------------------------- */

p#info {
  float: left;
  width: 75%;
  margin: 1.1% 0 0 2%;
  padding: 0.5% 2%;
  font-size: 0.9em;
  color: #ca5f5f;
  background: #fff;
  border: 1px dotted #c00;
  font-family: leelawadee;
}
.popupBody p#info.bigInfo,
div.workplace div.theForm p#info.bigInfo {
  width: 91.5%;
}
div.workplace a#btnCancel,
div.workplace div.showRecord #rightSide a#back {
  float: right;
  width: 8%;
  margin: 1% 2% 0 0;
  height: 30px;
  line-height: 30px;
  /*font-family: raspoutine;*/
  font-size: 0.9em;
  color: #666666;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 1px 0px 0px #fff;
  box-shadow: inset 0px 1px 0px 0px #fff;
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));*/
  /*background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
  background-color: #ededed;
  border: 1px solid #dcdcdc;
}
/*steps*/
div.workplace div.steps {
  position: relative;
  /*width: 96%;*/
  min-width: 23%;
  margin: 1% 2% 0 2%;
  padding: 0 0 0 0%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
  border-bottom: 1px solid #057e7c;
  border-bottom: 1px solid #015958;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: #fff;
}
div.workplace div.steps.mini {
  border-bottom: none;
  margin-top: 0.5%;
  width: 96%;
}
div.workplace div.steps p > a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}
div.workplace div.steps p {
  position: relative;
  float: left;
  width: auto;
  min-width: 50px;
  padding: 0 15px;
  /*padding:0 10px;*/
  margin-left: 0px;
  font-size: 0.85em;
  color: #000;
  background: #fff;
  height: 34px;
  line-height: 34px;
  border-right: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc;
}
div.workplace div.steps.mini p {
  height: 24px;
  line-height: 24px;
  background: #015958;
  color: #fff;
  font-weight: bold;
}

div.workplace div.steps p:first-child {
  margin-left: 0;
}
div.workplace div.steps p.last-child {
  border-right: none !important;
}
div.workplace div.steps p:hover,
div.workplace div.steps p.active {
  border-bottom: 2px solid #057e7c;
  border-bottom: 2px solid #015958;
  font-weight: bold;
  background: #057e7c;
  color: #fff;
  text-shadow: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #015958;
}

div.workplace div.steps p:hover i,
div.workplace div.steps p.active i {
  font-weight: normal;
}
div.workplace div.steps.mini p:hover,
div.workplace div.steps.mini p.active {
  border-bottom: none !important;
  background: #057e7c !important;
}
div.workplace div.steps p.disable,
div.workplace div.steps p.disable > a {
  background: #eee;
  color: #000;
  cursor: not-allowed;
}

div.workplace div.steps p.active:last-child {
  margin-right: 0;
}
div.workplace div.steps p span {
  position: relative;
  float: left;
  margin-top: 7px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 0.95em;
  margin-right: 10px;
  /*margin-right: 5px;*/
}
div.workplace div.steps p i {
  position: relative;
  float: left;
  margin-top: 7px;
  margin-right: 5px;
  width: 15px;
  height: 7px;
  line-height: 7px;
  text-align: center;
  font-size: 1.2em;
  font-weight: normal;
}
div.workplace div.theForm div.tab {
  display: none;
}
div.workplace div.tab-content {
  width: 96%;
  height: 100vh;
  margin: 0 0 0 2%;
  padding: 7% 0 0 0;
}

/*end*/
div.workplace div.tab-content div.tab.first {
  display: block;
}
div.workplace div.theForm {
  width: 96%;
  margin: 1% 2%;
  background: #fff;
  display: block !important;
  position: relative;
}

div.workplace .distrPrdts .record.four {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

div.workplace div.theForm .row .col {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

div.workplace div.theForm div.record.two {
  margin-top: 16px;
  /*overflow: hidden;*/
}

.popupBody div.switch,
div.workplace div.theForm div.record div.switch {
  position: relative;
  margin-right: 10px;
  float: left;
  width: 42px;
  height: 22px;
  background: #cccccc;
  z-index: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
.popupBody div.switch {
  margin-top: 3%;
}
.popupBody.extraCost div.switch {
  margin-top: 0;
}
.popupBody div.switch.second,
div.workplace div.theForm div.switch.second {
  margin-left: 10px;
}
.popupBody div.switch:after,
div.workplace div.theForm div.record div.switch:after {
  content: " ";
  height: 19px;
  width: 19px;
  border-radius: 18px;
  background: #fff;
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 2px;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-box-shadow: 0 2px 5px #999999;
  box-shadow: 0 2px 5px #999999;
}
.popupBody div.switch.switchOn,
div.workplace div.theForm div.record div.switch.switchOn {
  background: #015958 !important;
}
.popupBody div.switch.switchOn:after,
div.workplace div.theForm div.record div.switch.switchOn:after {
  left: 22px !important;
}
.popupBody .switchInput,
div.workplace div.theForm div.record .switchInput {
  display: none;
  opacity: 0;
  filter: alpha(opacity=0);
}
.popupBody span.check {
  float: left;
  margin-left: 10px;
  height: 28px;
  line-height: 35px;
  font-size: 0.9em;
  color: #444444;
  cursor: pointer;
}
div.workplace div.theForm.no-color {
  background: none;
}
div.popupBody div.record,
div.workplace div.theForm div.record {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 0.7% 2.1%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: leelawadee;
  gap: 4px;
}
div.popupBody div.record {
  padding: 0px;
}
div.workplace div.theForm div.record.four {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          /*justify-content: flex-end;*/
}

div.workplace div.purchase div.record.four {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

div.workplace div.record::after {
    content: "";
    clear: both;
    display: table;
}
div.popupBody div.record:nth-child(even),
div.workplace div.theForm div.record:nth-child(even) {
  background: #ededed;
}
.popupBody div.record.last,
div.workplace div.theForm div.record.last {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 0.7% 2.2%;
  border-bottom: none;
  background: #f1f6f4;
}
div.popupBody div.record .column,
div.workplace div.theForm div.record .column {
  float: left;
  width: 49%;
}
div.workplace div.theForm div.record .column.two {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
div.popupBody div.record .column.long,
div.workplace div.theForm div.record .column.long {
  width: 100%;
}
div.popupBody div.record .column.medium,
div.workplace div.theForm div.record .column.medium {
  width: 80%;
}
div.popupBody div.record .column.right,
div.workplace div.theForm div.record .column.right {
  float: right;
}
div.popupBody div.record .leftPrt,
div.workplace div.theForm div.record .leftPrt {
  position: relative;
  float: left;
  width: 30%;
  height: 29px;
  line-height: 29px;
  color: #444;
  font-size: 0.87em;
  font-family: leelawadee;
}
div.workplace div.theForm div.record .leftPrt.second {
  margin-left: 5%;
  width: 20%;
}
div.popupBody div.record div.column.long .leftPrt,
div.workplace div.theForm div.record div.column.long .leftPrt {
  width: 14.7%;
}
div.popupBody div.record div.column.medium .leftPrt,
div.workplace div.theForm div.record div.column.medium .leftPrt {
  width: 18.7%;
}
div.popupBody div.record .rghtPrt,
div.workplace div.theForm div.record .rghtPrt {
  float: left;
  width: 70%;
  position: relative;
}
div.popupBody div.record div.column.long .rghtPrt,
div.workplace div.theForm div.record div.column.long .rghtPrt {
  width: 85%;
}
div.popupBody div.record div.column.medium .rghtPrt,
div.workplace div.theForm div.record div.column.medium .rghtPrt {
  width: 80%;
}
div.workplace #loadPage div.uploadExcel {
  width: 100%;
  height: 25%;
  padding-top: 3%;
  clear: both;
}
div.workplace div.theForm div.uploadExcel label {
  width: 100%;
  height: 30%;
  line-height: 28px;
  padding: 3% 7%;
  background-color: #3a2621;
  border-radius: 4px;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
}
div.workplace div.theForm div.uploadExcel label:hover {
  background-color: #057e7c;
  cursor: pointer;
}
div.workplace div.theForm div.uploadExcel label i {
  margin-right: 3%;
}

div.workplace div.theForm div.goPageLinkDiv {
  display: none !important;
}
div.workplace div.theForm div.goPageLink {
  width: 100%;
  text-align: center;
}
div.workplace div.theForm div.goPageLink a {
  width: 100%;
  height: 2%;
  line-height: 2px;
  padding: 0.5% 10%;
  background-color: #f56954;
  border-radius: 4px;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
}
div.workplace div.theForm div.goPageLink a:hover {
  background-color: #057e7c;
  cursor: pointer;
}
div.workplace div.theForm a.goPageLink i {
  margin-right: 3%;
}
div.workplace div.theForm p.bigInfo {
  width: 100%;
}
div.workplace div.theForm div.clear {
  float: left;
  width: 100%;
  height: 8px;
  border-bottom: 1px dotted #ccc;
}
div.workplace div.theForm div.clear.transparent {
  background: #f1f6f4;
}
div.workplace div.theForm div.clear.hidden {
  height: 0px;
  visibility: hidden;
}
div.workplace div.theForm .required::after {
  content: " *";
  color: #f00;
  position: relative;
  left: 0px;
}
div.workplace div.theForm div.record .leftPrt[title] {
  text-decoration: underline;
}
.popupBody input.inputText,
div.workplace input.inputText,
div.workplace select,
.popupBody select,
.popupBody textarea,
div.workplace textarea {
  height: 28px;
  padding-left: 8px;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
div.workplace input.inputText.highlight,
div.workplace select.highlight,
div.workplace textarea.highlight,
div.workplace .highlight {
  border: 1px solid #f00;
}
div.workplace input[type="radio"] {
  float: left;
  -webkit-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
  height: 30px;
  line-height: 30px;
}
div.workplace div.record textarea {
  height: auto;
  max-height: 100px;
  padding: 8px;
  font-family: leelawadee;
  font-size: 0.85em;
}
.popupBody input.inputText.second,
div.workplace input.inputText.second,
div.workplace input[type="radio"].second,
div.workplace select.second {
  margin-left: 10px;
}
.popupBody select,
div.workplace select {
  padding-left: 8px;
  height: 30px;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=")
    96% center no-repeat;
}
div.workplace select.hidden {
  display: none;
}
div.workplace input[type="color"] {
  -webkit-appearance: square-button;
  height: 28px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 1px;
}
div.workplace textarea.jumbo.threeRows {
  height: 113px;
  max-height: 113px;
  min-height: 113px;
  max-width: 90%;
  min-width: 90%;
}
div.workplace textarea.jumbo.threeRows.matchHight {
  height: 160px;
  max-height: 160px;
  max-width: 100%;
}
div.workplace input.inputText.jumbo,
.popupBody input.inputText.jumbo,
div.workplace select.jumbo,
.popupBody select.jumbo,
.popupBody textarea.jumbo,
div.workplace textarea.jumbo {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace input.inputText.xxxlarge,
.popupBody input.inputText.xxxlarge,
div.workplace select.xxxlarge,
.popupBody select.xxxlarge,
div.workplace textarea.xxxlarge {
  width: 91.66%;
}
div.workplace input.inputText.xxlarge,
.popupBody input.inputText.xxlarge,
.popupBody select.xxlarge,
div.workplace select.xxlarge {
  width: 83.33%;
}
div.workplace input.inputText.xlarge,
div.workplace select.xlarge,
.popupBody input.inputText.xlarge,
.popupBody textarea.xlarge,
.popupBody select.xlarge {
  width: 75%;
}
div.workplace input.inputText.large,
.popupBody input.inputText.large,
div.workplace select.large,
.popupBody select.large,
div.workplace textarea.large {
  width: 66.66%;
}
div.workplace input.inputText.xxmedium,
.popupBody input.inputText.xxmedium,
.popupBody select.xxmedium,
div.workplace select.xxmedium {
  width: 62%;
}
div.workplace input.inputText.xmedium,
.popupBody input.inputText.xmedium,
.popupBody select.xmedium,
div.workplace select.xmedium {
  width: 58.33%;
}
div.workplace input.inputText.mediumx,
.popupBody input.inputText.mediumx,
.popupBody select.mediumx,
div.workplace select.mediumx {
  width: 54.4%;
}
div.workplace input.inputText.medium,
.popupBody input.inputText.medium,
div.popupBody select.medium,
div.workplace select.medium {
  width: 50%;
}
div.workplace input.inputText.vmedium,
.popupBody input.inputText.vmedium,
.popupBody select.vmedium,
div.workplace select.vmedium {
  width: 44.7%;
}
div.workplace input.inputText.xxxxsmall,
.popupBody input.inputText.xxxxsmall,
.popupBody select.xxxxsmall,
div.workplace select.xxxxsmall {
  width: 42.5%;
}
div.workplace input.inputText.xxxsmall,
.popupBody input.inputText.xxxsmall,
.popupBody select.xxxsmall,
div.workplace select.xxxsmall {
  width: 41.66%;
}
div.workplace input.inputText.xxsmall,
.popupBody input.inputText.xxsmall,
.popupBody select.xxsmall,
div.workplace select.xxsmall {
  width: 33.33%;
}
.popupBody input.inputText.xsmallx,
div.workplace input.inputText.xsmallx {
  width: 25%;
}
div.workplace input.inputText.xsmall,
.popupBody input.inputText.xsmall,
div.workplace select.xsmall,
.popupBody select.xsmall {
  width: 24%;
}
div.workplace input.inputText.small,
.popupBody input.inputText.small,
.popupBody select.small,
div.workplace select.small {
  width: 16.66%;
}
div.workplace input.inputText.xtiny,
.popupBody input.inputText.xtiny,
.popupBody select.xtiny,
div.workplace select.xtiny {
  width: 11.33%;
}
div.workplace input.inputText.tiny,
div.workplace select.tiny {
  width: 8.33%;
}
div.workplace input.inputText:focus,
.popupBody input.inputText:focus,
div.workplace select:focus,
.popupBody select:focus,
div.workplace select:focus optgroup,
.popupBody select:focus optgroup,
.popupBody textarea:focus,
div.workplace textarea:focus {
  outline: none;
  background-color: #eefaeb;
  border: 1px solid #aaa;
}
div.workplace input.inputText::-webkit-input-placeholder,
.popupBody input.inputText::-webkit-input-placeholder,
.popupBody textarea::-webkit-input-placeholder,
div.workplace textarea::-webkit-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-moz-placeholder,
.popupBody input.inputText::-moz-placeholder,
.popupBody textarea::-moz-placeholder,
div.workplace textarea::-moz-placeholder {
  color: #aaa;
}
div.workplace input.inputText:-ms-input-placeholder,
.popupBody input.inputText:-ms-input-placeholder,
.popupBody textarea:-ms-input-placeholder,
div.workplace textarea:-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-ms-input-placeholder,
.popupBody input.inputText::-ms-input-placeholder,
.popupBody textarea::-ms-input-placeholder,
div.workplace textarea::-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-webkit-input-placeholder,
.popupBody input.inputText::-webkit-input-placeholder,
.popupBody textarea::-webkit-input-placeholder,
div.workplace textarea::-webkit-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-moz-placeholder,
.popupBody input.inputText::-moz-placeholder,
.popupBody textarea::-moz-placeholder,
div.workplace textarea::-moz-placeholder {
  color: #aaa;
}
div.workplace input.inputText:-ms-input-placeholder,
.popupBody input.inputText:-ms-input-placeholder,
.popupBody textarea:-ms-input-placeholder,
div.workplace textarea:-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-ms-input-placeholder,
.popupBody input.inputText::-ms-input-placeholder,
.popupBody textarea::-ms-input-placeholder,
div.workplace textarea::-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-webkit-input-placeholder,
.popupBody input.inputText::-webkit-input-placeholder,
.popupBody textarea::-webkit-input-placeholder,
div.workplace textarea::-webkit-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-moz-placeholder,
.popupBody input.inputText::-moz-placeholder,
.popupBody textarea::-moz-placeholder,
div.workplace textarea::-moz-placeholder {
  color: #aaa;
}
div.workplace input.inputText:-ms-input-placeholder,
.popupBody input.inputText:-ms-input-placeholder,
.popupBody textarea:-ms-input-placeholder,
div.workplace textarea:-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-ms-input-placeholder,
.popupBody input.inputText::-ms-input-placeholder,
.popupBody textarea::-ms-input-placeholder,
div.workplace textarea::-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-webkit-input-placeholder, .popupBody input.inputText::-webkit-input-placeholder, .popupBody textarea::-webkit-input-placeholder, div.workplace textarea::-webkit-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-moz-placeholder, .popupBody input.inputText::-moz-placeholder, .popupBody textarea::-moz-placeholder, div.workplace textarea::-moz-placeholder {
  color: #aaa;
}
div.workplace input.inputText:-ms-input-placeholder, .popupBody input.inputText:-ms-input-placeholder, .popupBody textarea:-ms-input-placeholder, div.workplace textarea:-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::-ms-input-placeholder, .popupBody input.inputText::-ms-input-placeholder, .popupBody textarea::-ms-input-placeholder, div.workplace textarea::-ms-input-placeholder {
  color: #aaa;
}
div.workplace input.inputText::placeholder,
.popupBody input.inputText::placeholder,
.popupBody textarea::placeholder,
div.workplace textarea::placeholder {
  color: #aaa;
}
div.workplace div#tweet_feed,
.popupBody div#tweet_feed {
  float: left;
  width: 50%;
  margin: 0.5% 0 0 1%;
  font-size: 0.85em;
  color: #666;
  font-style: italic;
}
div label.error {
  margin-top: 3px;
  width: 100%;
  padding: 0 0 0 20px;
  font-size: 0.87em;
  color: #f00;
  line-height: 22px;
  background: url(../images/system/error_s.png) left 5px no-repeat;
  display: none;
}
div.workplace div.theForm label.error.inline {
  width: auto;
  margin: 0.7% 0 0 2%;
}
.popupBody span.btnSubmit,
.popupBody button.btnSubmit,
div.workplace div.theForm button.btnSubmit,
div.workplace div.showRecord button.btnSubmit {
  padding: 0.5% 3%;
  font-size: 1em;
}
.popupBody span.btnSubmit {
  padding: 0.6% 3%;
}
.popupBody span.btnSubmit.displayB4 {
  padding: 1.5% 3%;
}
div.workplace div.theForm.chngPass .btnSubmit {
  float: left;
  margin-left: 16.2%;
  padding: 0.6% 3%;
}
div.workplace div.theForm label.process {
  float: right;
  margin-right: 10px;
  width: 20px;
  height: 30px;
  background: url(../images/system/loading.gif) center no-repeat;
  display: none;
}
div.workplace div.theForm.chngPass label.process {
  float: left;
  margin: 1.3% 0 0 2%;
}
/*--- user add ---*/
div.workplace div.theForm div.column span.waiting {
  float: left;
  width: 16px;
  height: 30px;
  line-height: 30px;
  margin-left: 8px;
  background: url(../images/system/loading.gif) no-repeat left center;
  display: none;
}
div.workplace div.theForm.user div.column.long {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 0.5%;
}
div.workplace div.theForm div#userRights {
  float: left;
  width: 100%;
  margin: 1% 0 0.5%;
}
div.workplace div.theForm div#userRights div.rights {
  float: left;
  width: 18.5%;
  margin-right: 1.5%;
}
div.workplace div.reportArea fieldset,
div.workplace div.theForm fieldset {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 45%;
  flex: 1 1 45%;
  height: 100%;
  padding: 10px 0;
  background: #efefef;
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
div.workplace div.theForm fieldset .article {
  width: 100%;
}
div.workplace div.reportArea fieldset {
  margin-bottom: 0.5%;
}

div.workplace div.reportArea fieldset.jumbo,
div.workplace div.theForm fieldset.jumbo {
  width: 100%;
}
div.workplace div.reportArea fieldset.xxlarge,
div.workplace div.theForm fieldset.xxlarge {
  width: 70%;
}
div.workplace div.reportArea fieldset.second,
div.workplace div.theForm fieldset.second {
  margin-top: 10px;
}
div.workplace div.reportArea fieldset.custom-height,
div.workplace div.theForm fieldset.custom-height {
  min-height: 235px;
}
div.workplace div.reportArea fieldset.full-height,
div.workplace div.theForm fieldset.full-height {
  min-height: 300px;
}
div.workplace div.reportArea fieldset.vextra-height,
div.workplace div.theForm fieldset.vextra-height {
  min-height: 225px;
}
div.workplace div.reportArea fieldset.extra-height,
div.workplace div.theForm fieldset.extra-height {
  min-height: 200px;
}
div.workplace div.reportArea fieldset.sextra-height,
div.workplace div.theForm fieldset.sextra-height {
  min-height: 190px;
}
div.workplace div.reportArea fieldset.sextra-height1,
div.workplace div.theForm fieldset.sextra-height1 {
  min-height: 185px;
}
div.workplace div.reportArea fieldset.mid-height,
div.workplace div.theForm fieldset.mid-height {
  min-height: 160px;
}
div.workplace div.reportArea fieldset.less-height,
div.workplace div.theForm fieldset.less-height {
  min-height: 60px;
  padding-top: 15px;
}
div.workplace div.reportArea fieldset legend,
div.workplace div.theForm fieldset legend {
  margin-left: 15px;
  padding: 7px 14px;
  color: #fff;
  font-size: 0.87em;
  background: #939393;
  border: 1px solid #6c6c6c;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
div.workplace div.theForm fieldset.white legend {
  background: #fff;
  position: relative;
  margin-left: 4%;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  font-size: 0.95em;
  color: #444444;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
div.workplace div.theForm fieldset.displayField {
  /*display: none;*/
  background: none;
  border: none;
}
div.workplace div.theForm fieldset div.inline-info {
  position: absolute;
  float: right;
  width: 100%;
  padding-left: 70%;
  top: 34%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
  text-transform: capitalize;
}
div.workplace div.theForm fieldset div.inline-info span#span4currency {
  color: #ff0000;
}
div.workplace div.theForm div#userRights fieldset > div {
  float: left;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 1%;
}
div.workplace div.theForm fieldset > div.inline-info {
  float: right;
  width: 90%;
}
div.workplace div.theForm div#userRights label.tickModule {
  cursor: pointer;
}
div.workplace div.theForm div#userRights input.checkOne {
  margin: 5px 5px 0;
}
div.workplace div.theForm div#userRights label.tickOne {
  position: relative;
  left: 8px;
  font-size: 0.85em;
  cursor: pointer;
}
/* -- reception form */
div.workplace div.reportArea fieldset .innerRow,
div.workplace div.theForm fieldset .innerRow {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 15px 7px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.theForm fieldset .innerRow.invosices {
  padding: 0;
}
div.workplace div.reportArea fieldset .innerRow {
  padding: 0 15px 3px;
}
div.workplace div.theForm fieldset .innerRow span#checkAllItems {
  color: #000fff;
  cursor: pointer;
}
div.workplace div.theForm fieldset .innerRow span#checkAllItems:hover {
  text-decoration: underline;
}
div.workplace div.reportArea fieldset .innerColumn,
div.workplace div.theForm.notary div.record .innerColumn {
  position: relative;
  float: left;
  width: 100%;
}
div.workplace div.theForm.notary div.record .innerColumn a.showLamSum {
  color: #0000ff;
  text-decoration: underline;
  font-size: 0.8em;
}
div.workplace div.theForm .innerColumn label.error {
  margin-left: 22%;
}
div.workplace div.theForm .innerRow div.label {
  position: relative;
  margin-bottom: 5px;
  margin-right: 11px;
  width: 20%;
  height: 28px;
  line-height: 28px;
  color: #333;
  font-size: 0.83em;
}
div.workplace div.theForm .innerRow p#info {
  width: 95.5%;
  margin-left: 0;
}
div.workplace div.theForm a.showLamSum {
  color: #0000ff;
  text-decoration: underline;
  font-size: 0.95em;
  line-height: 25px;
  font-style: italic;
  margin-left: 15px;
  cursor: pointer;
}
div.workplace div.theForm .innerRow div.label.required::after {
  content: " *";
  color: #f00;
  position: relative;
  left: 0px;
}
div.workplace div.theForm .innerRow span.hinter {
  float: left;
  margin-right: 10px;
  font-size: 0.85em;
  color: #666;
}
div.workplace div.theForm .innerRow span.hinter.xmedium {
  width: 22.5%;
}
div.workplace div.theForm .innerRow span.hinter.medium {
  width: 16.8%;
}
div.workplace div.theForm fieldset .innerRow label.error.margin-left {
  margin-left: 22%;
  width: 75%;
}
div.workplace div.theForm div.innerRow div.suggest {
  width: 31.5%;
  margin-left: 9.9%;
}
div.workplace div.theForm div.innerRow div.suggest.large {
  width: 38.7%;
  margin-left: 0;
}
div.workplace div.theForm div.innerRow div.suggest.jumbo {
  width: 56%;
  margin-left: 0;
}
div.workplace div.theForm div.innerRow.last {
  padding: 0.7% 0;
  border-bottom: none;
  background: #f1f6f4;
}
/* -- list of invoices in Receipt Form -- */

div.workplace div.theForm article {
  float: left;
  width: 94%;
  margin: 0 3% 1%;
  height: 160px;
  max-height: 200px;
  background: #fcfcfc;
  border: 1px solid #ccc;
}
div.workplace div.theForm article div.allSales {
  max-height: 125px;
  min-height: 125px;
  margin-top: 7%;
  overflow-y: auto;
}
div.workplace div.theForm article div.line {
  float: left;
  width: 88.5%;
  padding: 2px 25px;
  height: 25px;
  line-height: 25px;
  border-bottom: 1px dotted #ccc;
}
div.workplace div.theForm article div.line.header {
  position: absolute;
  width: 37.9%;
  background: #f1f6f4;
  padding: 0 25px;
  height: 32px;
  font-weight: 600;
  margin-top: 0;
}
div.workplace div.theForm article.sales div.line.header {
  width: 36.2%;
}
div.workplace div.theForm article p.noRecord {
  float: left;
  width: 100%;
  margin-top: 3%;
  font-size: 0.95em;
  text-align: center;
  font-style: italic;
  color: #555;
}
div.workplace div.theForm article div.line div.cave {
  float: left;
  font-size: 0.95em;
  height: 32px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #555;
}
div.workplace div.theForm article div.line div.cave.four {
  width: 33.33333333333333%;
}
div.workplace div.theForm article div.line.header div.cave.four {
  width: 30%;
}
div.workplace div.theForm article div.line div.cave.three {
  width: 25%;
}
div.workplace div.theForm article div.line div.cave.two {
  width: 16.66666666666667%;
}
div.workplace div.theForm article div.line.header div.cave.two {
  width: 16%;
  margin-left: 1.5%;
}
div.workplace div.theForm article div.line input {
  padding: 0 5%;
  height: 75%;
}
/* -- checkbox and radio buttons -- */
div.workplace div.theForm input[type="checkbox"] {
  margin: 9px 8px 0 2px;
  -webkit-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}
div.workplace div.theForm input[type="checkbox"].second {
  margin-left: 13px;
}
div.workplace div.theForm input[type="checkbox"] + span {
  float: left;
  line-height: 29px;
  font-size: 0.85em;
  cursor: pointer;
}
div.workplace div.theForm input[type="radio"] {
  float: left;
}
div.workplace input[type="radio"] + label {
  float: left;
  margin: 6px 15px 0 5px;
  color: #444;
  font-size: 0.85em;
  cursor: pointer;
}
div.workplace span.hint {
  float: left;
  margin-left: 10px;
  line-height: 30px;
  font-size: 0.85em;
  color: #666;
}
/* -- other notary amounts -- */
div.workplace div.theForm div.hint {
  float: left;
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
div.workplace div.theForm div.hints div.hint.second {
  margin-left: 11px;
}
div.workplace div.theForm div.hint.highlight {
  border-color: #f00;
}
div.workplace div.theForm div.hint input[type="text"] {
  width: auto;
  border: none;
}
div.workplace div.theForm div.hint input[type="text"].xmedium {
  width: 12em;
}
div.workplace div.theForm div.hint input[type="text"].medium {
  width: 10em;
}
div.workplace div.theForm .checkbox.hidden {
  float: left;
  display: none;
}
div.workplace div.theForm .box {
  float: left;
  text-align: center;
  border-left: 1px solid #b5c4d5;
  width: 30px;
  height: 28px;
  line-height: 28px;
  color: red;
  cursor: pointer;
}
div.workplace div.theForm .box i.icon {
  opacity: 0.8;
  font-size: 1.1em;
  font-style: normal;
  font-family: FontAwesome;
}
div.workplace div.theForm .box i.icon::after {
  content: "\f00d";
}
div.workplace div.theForm .checkbox:checked + .box .icon {
  opacity: 0.5;
  color: green;
}
div.workplace div.theForm .checkbox:checked + .box .icon::after {
  content: "\f00c";
}
div.workplace div.theForm div.hint .show {
  float: left;
  width: 30px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #777;
  cursor: pointer;
  border-left: 1px solid #ccc;
}
/* -- */
div.workplace div.theForm label.idnttyBox {
  float: left;
  width: 30px;
  margin-left: 10px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  font-size: 0.8em;
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: pointer;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
div.workplace div.theForm label.idnttyBox:hover {
  border: 1px solid #999;
}
/* ------  add to list ------ */
.popupBody div.record .listCaves,
div.workplace div.theForm div.record .listCaves {
  width: 100%;
  padding: 0.5% 0;
}
.popupBody #topCaves,
div.workplace div.theForm #topCaves,
div.workplace div.theForm #btmCaves {
  float: left;
  width: 100%;
  color: #555;
  margin-bottom: 1%;
  display: flex;
}
div.workplace div.prchsOrder #btmCaves {
  margin-top: 16px;
}
.popupBody .listCaves div.cave,
div.workplace div.theForm .listCaves div.cave {
  width: 12%;
  margin: 0 0.6% 0 0;
  font-size: 0.95em;
}
div.workplace div.prchsOrder .listCaves div.cave,
div.workplace div.purchase .listCaves div.cave {
  width: 100%;
}
div.workplace div.distrPrdts .listCaves #topCaves {
  gap: 8px;
}
div.workplace div.distrPrdts .listCaves div.cave .cave {
  width: 100% !important;
}
div.workplace div.distrPrdts .listCaves div.cave input,
div.workplace div.distrPrdts .listCaves div.cave select {
  width: 100%;
}
div.workplace div.theForm .listCaves div.cave p {
  margin-bottom: 8px;
}
.popupBody .listCaves div.cave {
  float: left;
  width: 100%;
  margin-top: 13px;
}
.popupBody .listCaves div.cave .required:after,
div.workplace div.theForm .listCaves div.cave.required:after {
  content: "*";
  color: #f00;
  position: relative;
  left: 3px;
}
.popupBody .listCaves div.cave.v2large,
div.workplace div.theForm .listCaves div.cave.v2large {
  width: 93%;
}
.popupBody .listCaves div.cave.v2large::after,
div.workplace div.theForm .listCaves div.cave.v2large::after {
  content: "";
  clear: both;
  display: table;
}
.popupBody .listCaves div.cave.vxxlarge,
div.workplace div.theForm .listCaves div.cave.vxxlarge {
  width: 78%;
  flex-basis:  78%;
}
.popupBody .listCaves div.cave.vxlarge,
div.workplace div.theForm .listCaves div.cave.vxlarge {
  width: 69%;
  flex-basis:  69%;
}
.popupBody .listCaves div.cave.vlarge,
div.workplace div.theForm .listCaves div.cave.vlarge {
  width: 65.5%;
  flex-basis: 65.5%;
}
.popupBody .listCaves div.cave.xlarge,
div.workplace div.theForm .listCaves div.cave.xlarge {
  width: 60%;
  flex-basis: 60%;
}
.popupBody .listCaves div.cave.large,
div.workplace div.theForm .listCaves div.cave.large {
  width: 46%;
  flex-basis:  46%;
}
.popupBody .listCaves div.cave.larger,
div.workplace div.theForm .listCaves div.cave.larger {
  width: 47.5%;
  flex-basis: 47.5%;
}
.popupBody .listCaves div.cave.slarge,
div.workplace div.theForm .listCaves div.cave.slarge {
  width: 36%;
  flex-basis:  36%;
}
.popupBody .listCaves div.cave.xxmiddle,
div.workplace div.theForm .listCaves div.cave.xxmiddle {
  width: 30%;
  flex-basis: 30%;
}
.popupBody .listCaves div.cave.xmiddle,
div.workplace div.theForm .listCaves div.cave.xmiddle {
  width: 28%;
  flex-basis: 28%;
}
.popupBody .listCaves div.cave.mmiddle,
div.workplace div.theForm .listCaves div.cave.mmiddle {
  width: 25%;
  flex-basis: 25%;
}
.popupBody .listCaves div.cave.middle,
div.workplace div.theForm .listCaves div.cave.middle {
  width: 20.6%;
  flex-basis:  20.6%;
}
div.workplace div.theForm .listCaves div.cave.lshort {
  width: 15%;
  flex-basis:  15%;
}
.popupBody .listCaves div.cave.lshort {
  width: 32%;
  flex-basis:  32%;
}
.popupBody .listCaves div.cave.mshort,
div.workplace div.theForm .listCaves div.cave.mshort {
  width: 10%;
   flex-basis:  10%;
}
.popupBody .listCaves div.cave.vshort,
div.workplace div.theForm .listCaves div.cave.vshort {
  width: 8%;
  flex-basis:  8%;
}
.popupBody .listCaves div.cave.vshort,
div.workplace div.theForm .listCaves div.cave.vshorter {
  width: 6.5%;
  flex-basis: 6.5%;
}
/* --- */
div.workplace div.popupBody div.cave input,
div.workplace div.popupBody div.cave select,
div.workplace div.theForm div.cave input,
div.workplace div.theForm div.cave select {
  width: 99%;
  min-width: 120px;
  height: 33px;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.theForm div.cave select {
  height: 32px;
}
div.workplace div.theForm div.cave select.xlarge {
  width: 88%;
}
div.workplace div.theForm div.cave select.large {
  width: 82%;
}
.popupBody .listCaves div.cave input#byItem,
div.workplace div.theForm .listCaves div.cave input#byItem,
.popupBody .listCaves div.cave input#byCtgry,
div.workplace div.theForm .listCaves div.cave input#byCtgry,
div.workplace div.theForm .listCaves div.cave input#byCtgry4CheckPrdct,
div.workplace div.theForm .listCaves div.cave input#serviceCheck,
div.workplace div.theForm .listCaves div.cave input#byCtgry4order {
  margin: 0 7% 0 4%;
}
div.workplace div.theForm .listCaves div.cave.has-check label:hover {
  cursor: pointer;
}
.popupBody .listCaves input[type="checkbox"].top,
div.workplace div.theForm .listCaves input[type="checkbox"].top {
  float: none;
  width: auto;
  height: auto;
  position: relative;
  top: 2px;
  left: 20px;
  margin: 0;
  -webkit-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
.popupBody .listCaves label.top,
div.workplace div.theForm .listCaves label.top {
  cursor: pointer;
}

/* New Addition Start */

.listCaves {
  gap: 24px;
}

.listCaves .row {
  gap: 16px;
}

.listCaves .row .col {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  gap: 8px;
}

.listCaves .row .col .cave {
  width: 100% !important;
}

.record fieldset .innerRow .innerColumn {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.record fieldset .innerRow .innerColumn select,
.record fieldset .innerRow .innerColumn input {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Table */
.table-wrapper {
  /* margin: 10px 70px 70px; */
}

table:not(.not-data-table):not(.pika-table) {
  border-radius: 5px;
  font-size: 12px;
  font-weight: normal;
  border: none;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}

table:not(.not-data-table):not(.pika-table) td,
table:not(.not-data-table):not(.pika-table) th {
  padding: 8px;
  font-size: 1.2em;
  text-align: left;
}

table:not(.not-data-table):not(.pika-table) td input {
  width: 83%;
  height: 32px !important;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

table:not(.not-data-table):not(.pika-table) td  select {
  width: 100px;
  height: 32px !important;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

table:not(.not-data-table):not(.pika-table) td input,
table:not(.not-data-table):not(.pika-table) td select {
  padding-left: 8px;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

table:not(.not-data-table):not(.pika-table) td input:focus {
  outline: none;
  background-color: #eefaeb;
  border: 1px solid #aaa;
}

table:not(.not-data-table):not(.pika-table) td label {
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.responsive-v2 td .addon-btn {
  min-width: 25px;
  text-align: center;
  margin-left: -1px;
  margin-right: -1px;
  border: 1px solid #ccc;
  cursor: pointer;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
  vertical-align: bottom;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: -6px;
}

table:not(.not-data-table):not(.pika-table) td .addon-btn:hover {
  background-color: #ebebeb;
}

table:not(.not-data-table):not(.pika-table) td .add-ToList {
  background: #015958 !important;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 7px 35px;
  color: #fff;
  font-weight: normal;
  cursor: pointer;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
}

.responsive-v2 {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}

table:not(.not-data-table):not(.pika-table) tr,
.responsive-v2 tr {
  border: 1px solid #ddd;
  padding: .35em;
}

table:not(.not-data-table):not(.pika-table) thead,
.responsive-v2 thead {
  background: #e8edef;
  color: #484848;
  font-weight: bold;
}

table:not(.not-data-table):not(.pika-table) th,
table:not(.not-data-table):not(.pika-table) td,
.responsive-v2 th,
.responsive-v2 td {
  padding: .625em;
  border: 1px dotted #999;
}

table:not(.not-data-table):not(.pika-table) th,
.responsive-v2 th {
  font-size: 14px;
  background: #c4e8ec;
  color: #383b40 !important;
  font-weight: bold;
}

table:not(.not-data-table):not(.pika-table) tr:nth-child(even),
.responsive-v2 tr:nth-child(even) {
  background-color: #f3f3f3;
}

/* Common Classes */

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.hidden {
  display: none;
}

/* Media Queries */

@media only screen and (max-width: 1340px) {
  div.workplace div.theForm div.record {
    gap: 16px;
  }
}

@media only screen and (max-width: 1200px) {
  div.workplace #loadPage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }

  div.workplace #loadPage div.twoCols {
    width: 100%;
  }

  div.workplace #loadPage div.twoCols.second {
    margin-top: 0px !important;
  }

  div.workplace #loadPage #command .buttons.spec,
  div.workplace #loadPage #command {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  div.workplace #loadPage #command .buttons.spec {
    width: unset !important;
  }
}

@media only screen and (max-width: 1100px) {
  div.workplace select.second {
    width: 55.7%;
    margin-left: 0px;
    margin-top: 8px;
  }

  div.workplace div.purchase #btmCaves {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
  }

  div.workplace div.purchase .listCaves div.cave {
    width: 30%;
  }

  div.workplace div.purchase .listCaves div.cave .cave {
    width: 100%;
  }
}

@media only screen and (max-width: 1070px) {
  div.workplace div.receivable-form div.record {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  div.workplace div.receivable-form div.record.last,
  div.workplace div.receivable-form div.record.one {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  div.workplace div.receivable-form div.record .column,
  div.workplace div.receivable-form div.record .column input,
  div.workplace div.receivable-form div.record .column select {
    width: 100%;
    margin: 0;
    margin-bottom: 8px;
  }

  div.workplace div.receivable-form div.record.one .column.right {
    display: none;
  }
}

@media only screen and (max-width: 930px) {
  div.workplace #loadPage #dynamicQnd #filters > div {
    width: 100% !important;
  }

  div.workplace .deposit-form div.record.one {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

  }

  div.workplace .deposit-form div.record.one .column {
    width: 100%;
  }

  div.workplace .deposit-form div.record.two .column .rghtPrt select {
    width: 100%;
  }

  div.workplace .deposit-form div.record.one .column .leftPrt {
    width: 19%;
  }

  div.workplace .deposit-form div.record.three {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  div.workplace .deposit-form div.record.three .column {
    width: 100%;
  }

  div.workplace .deposit-form div.record.three .column .leftPrt {
    width: 17%;
  }

  div.workplace .deposit-form div.record.three .column .rghtPrt {
    width: 83%;
  }

  div.workplace .deposit-form div.record.three .column.right {
    float: none;
  }

  div.workplace .deposit-form div.record.four .column.one .rghtPrt input {
    width: 100%;
  }

  div.workplace .purchase .record {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  div.workplace .purchase .record .col {
    -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    width: 100%;
  }

  div.workplace .purchase .record .col.third .row {
    width: 100%;
  }

  div.workplace .purchase .record .col.third input {
    width: 100%;
  }

  div.workplace .purchase .record.five .col {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }

  div.workplace .purchase .record.five .col .rghtPrt {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }

  .total-area div.amnt {
    margin-top: 0 !important;
  }

  .total-area {
    width: 100% !important;
  }

  .theForm.new-style.new-style form .footer {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }

  div.workplace div.showRecord div.details.long div.listItems {
    min-width: 800px;
  }

  div.workplace div.showRecord #leftSide .right-sp {
    height: 90px;
  }

  div.workplace div.showRecord div.details:not(div.workplace div.showRecord #rightSide div.details) {
    overflow-x: auto;
  }
}

@media only screen and (max-width: 900px) {
  div.workplace .deposit-form div.record.four {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  div.workplace .deposit-form div.record.four .column {
    width: 100%;
  }

  div.workplace .deposit-form div.record.four .column.one .leftPrt,
  div.workplace .deposit-form div.record.four .column.right .leftPrt {
    width: auto;
  }

  div.workplace .deposit-form div.record.four .column.one .leftPrt {
    margin-right: 80px;
  }

  div.workplace .deposit-form div.record.four .column.right .leftPrt {
    margin-right: 32px;
  }

  div.workplace .deposit-form div.record.four .column input {
    width: 100%;
  }

  div.workplace .add-expence-form div.record .column,
  div.workplace .add-expence-form div.record .rghtPrt,
  div.workplace .add-expence-form div.record .rghtPrt input,
  div.workplace .add-expence-form div.record .rghtPrt select,
  div.workplace .supplier-add-form div.record .column,
  div.workplace .supplier-add-form div.record .rghtPrt,
  div.workplace .supplier-add-form div.record .rghtPrt input,
  div.workplace .supplier-add-form div.record .rghtPrt select,
  div.workplace .payable-form div.record .column,
  div.workplace .payable-form div.record .rghtPrt,
  div.workplace .payable-form div.record .rghtPrt input,
  div.workplace .payable-form div.record .rghtPrt select,
  div.workplace .purchase-bill-add div.record .column,
  div.workplace .purchase-bill-add div.record .rghtPrt,
  div.workplace .purchase-bill-add div.record .rghtPrt input,
  div.workplace .purchase-bill-add div.record .rghtPrt select {
    width: 100% !important;
  }

  div.workplace .add-expence-form div.record .rghtPrt input,
  div.workplace .add-expence-form div.record .rghtPrt select,
  div.workplace .supplier-add-form div.record .rghtPrt input,
  div.workplace .supplier-add-form div.record .rghtPrt select,
  div.workplace .payable-form div.record .rghtPrt input,
  div.workplace .payable-form div.record .rghtPrt select,
  div.workplace .purchase-bill-add div.record .rghtPrt input,
  div.workplace .purchase-bill-add div.record .rghtPrt select {
    margin-left: 0 !important;
    margin-bottom: 8px !important;
  }

  div.workplace .purchase-bill-add div.record.two #divs4Vendor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }

  div.workplace .add-expence-form div.record,
  div.workplace .add-expence-form div.record .column,
  div.workplace .supplier-add-form div.record,
  div.workplace .supplier-add-form div.record .column,
  div.workplace .payable-form div.record,
  div.workplace .payable-form div.record .column,
  div.workplace .purchase-bill-add div.record,
  div.workplace .purchase-bill-add div.record #vreceivable,
  div.workplace .purchase-bill-add div.record .column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start !important;
          -ms-flex-pack: start !important;
              justify-content: flex-start !important;
  }

}

@media only screen and (max-width: 830px) {
  div.workplace div.steps a {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

  div.workplace div.steps a p {
    float: unset;
  }

  div.workplace div.update div.record .column,
  div.workplace div.update div.record,
  div.workplace div.payable div.record .column,
  div.workplace div.payable div.record,
  div.workplace div.purchase div.record .column,
  div.workplace div.purchase div.record,
  .add-customer-form .column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    width: 100% !important;
  }

  div.workplace div.purchase div.details.long div.listItems .record {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  div.workplace div.update div.record .column #divs4Vendor,
  div.workplace div.update div.record .column .rghtPrt,
  div.workplace div.update div.record .column .rghtPrt input,
  div.workplace div.update div.record .column .rghtPrt select,
  div.workplace div.payable div.record .column .rghtPrt,
  div.workplace div.payable div.record .column .rghtPrt input,
  div.workplace div.payable div.record .column .rghtPrt select,
  div.workplace div.purchase div.record .column {
    width: 100%;
  }

  div.workplace div.update div.record .column .rghtPrt input
  {
    margin-left: 0px;
    margin-top: 8px;
  }

  div.workplace div.purchase .listCaves div.cave,
  div.workplace .add-customer-form div.record .rghtPrt {
    width: 100% !important;
    margin-bottom: 8px;
  }

  div.workplace div.purchase .listCaves div.cave {
    -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
  }

  div.workplace div.purchase div.list {
    overflow-x: auto;
  }

  div.workplace .add-customer-form div.record .rghtPrt input {
    margin-bottom: 8px;
  }

  div.workplace .add-customer-form div.record .rghtPrt input,
  div.workplace .add-customer-form div.record .rghtPrt select {
    width: 100% !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  div.workplace .add-customer-form div.record .rghtPrt select {
    margin-left: 0px !important;
  }

  .add-customer-form .column.one {
    float: none !important;
  }

  .add-customer-form .column .dob-input {
    margin-left: 0 !important;
  }

  .table-container {
    overflow-x: scroll;
    width: 100%;
  }

  div.workplace div.showRecord #rightSide {
    float: unset !important;
    width: 100% !important;
    margin-bottom: 8px;
  }
  div.workplace div.showRecord div.totals,
  div.workplace div.showRecord #leftSide {
    width: 100% !important;
  }
  div.workplace div.showRecord div.totals div {
    padding: 8px 0px;
  }
  div.workplace .popUpForm .content {
    width: 90% !important;
  }

  div.workplace div.theForm.new-style .tablelist .table-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
  }

  div.workplace div.theForm.newPurchasePage .tablelist .table-container .record.header {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }

  div.workplace div.theForm.newPurchasePage .tablelist .table-container .record:last-of-type {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 60% !important;
    padding-right: 3px;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record {
    height: 100%;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record {
    width: 65%;
    gap: 0px;
    margin-right: 3px !important;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record.header {
    width: 50% !important;
    gap: 18px;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record:last-of-type {
    margin-left: 8px !important;
  }

  div.workplace div.theForm.new-style .tablelist .record .add-ToList {
    padding: 8px 0px !important;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record {
    width: 65%;
    gap: 0px;
    margin-right: 3px !important;
  }

  div.workplace .deposit #dynamicQnd #foundNum,
  div.workplace #loadPage #dynamicQnd #foundNum {
    width: 97%;
    margin-bottom: 16px;
  }

  div.workplace div.theForm.new-style .tablelist .record .cave {
    min-width: 100px !important;
    width: 100%;
  }

  div.workplace div.theForm.new-style .tablelist {
    width: 100%;
  }
}

@media only screen and (max-width: 700px) {
  div.workplace .supplier-update div.record,
  div.workplace .supplier-update div.record .column,
  div.workplace .deposit-form div.record,
  div.workplace .deposit-form div.record .column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  div.workplace .deposit-form div.record.two .column.right {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }

  div.workplace .supplier-update div.record.last button ,
  div.workplace .deposit-form div.record.last button {
    margin-top: 8px;
  }

  div.workplace .supplier-update div.record .column,
  div.workplace .supplier-update div.record .column .rghtPrt,
  div.workplace .supplier-update div.record .column .rghtPrt input,
  div.workplace .supplier-update div.record .column .rghtPrt select,
  div.workplace .deposit-form div.record .column,
  div.workplace .deposit-form div.record .column .rghtPrt,
  div.workplace .deposit-form div.record .column .rghtPrt input,
  div.workplace .deposit-form div.record .column .rghtPrt select {
    width: 100% !important;
  }

  div.workplace .supplier-update div.record .column .rghtPrt select,
  div.workplace .deposit-form div.record .column .rghtPrt select {
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
  }
  div.workplace div.theForm.newPurchasePage .tablelist .record {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }
}

@media only screen and (max-width: 830px) {
  .middlebar div.topBar #programName .mobile-toggler {
    display: unset;
  }

  .nav-sidebar-wrapper.active .sidebar-close-btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .nav-sidebar-wrapper.active .sidebar-close-btn img {
    opacity: 1;
  }

  .nav-sidebar-wrapper {
    position: fixed !important;
    left: -100% !important;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  }

  div.workplace div.theForm.new-style .tablelist .record .cave.middle {
    min-width: 25%;
  }

  div.workplace div.theForm.new-style .tablelist .record .cave.short {
    min-width: 15%;
  }

  div.workplace div.theForm.new-style .tablelist .record .cave.xshort {
    min-width: 10%;
  }

  div.workplace div.theForm.new-style .receipt-totals {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  div.workplace div.theForm div.totals {
    width: 100% !important;
  }

  div.workplace div.theForm div.record.receipt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  div.workplace div.theForm div.record .listCaves {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  div.workplace div.prchsOrder div.record.two,
  div.workplace div.category-update div.record,
  div.workplace div.store-adjust div.record,
  div.workplace div.deposit-update div.record .column,
  div.workplace div.deposit-update div.record,
  div.workplace div.update-customer div.record .column,
  div.workplace div.update-customer div.record {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  div.workplace div.prchsOrder div.record .leftPrt,
  div.workplace div.prchsOrder div.record .column,
  div.workplace div.category-update div.record .leftPrt,
  div.workplace div.category-update div.record .column,
  div.workplace div.category-update div.record .rghtPrt,
  div.workplace div.category-update div.record .rghtPrt input,
  div.workplace div.category-update div.record .rghtPrt select,
  div.workplace div.store-adjust div.record .leftPrt,
  div.workplace div.store-adjust div.record .column,
  div.workplace div.store-adjust div.record .rghtPrt,
  div.workplace div.store-adjust div.record .rghtPrt input,
  div.workplace div.deposit-update div.record .leftPrt,
  div.workplace div.deposit-update div.record .column,
  div.workplace div.deposit-update div.record .rghtPrt,
  div.workplace div.deposit-update div.record .rghtPrt input,
  div.workplace div.deposit-update div.record select,
  div.workplace div.update-customer div.record .leftPrt,
  div.workplace div.update-customer div.record .column,
  div.workplace div.update-customer div.record .rghtPrt,
  div.workplace div.update-customer div.record .rghtPrt input,
  div.workplace div.update-customer div.record select {
    width: 100% !important;
    margin-left: 0px !important;
  }

  div.workplace div.store-adjust div.record .rghtPrt select#slcMeasure {
    margin-top: 8px;
  }

  div.workplace div.update-customer div.record .rghtPrt input,
  div.workplace div.update-customer div.record select {
    margin-bottom: 8px;
    margin-top: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  div.workplace div.update-customer div.record.one .column.two .rghtPrt {
    margin-top: 50px;
  }
  div.workplace div.update-customer div.record {
    gap: 0px !important;
  }
  div.workplace div.prchsOrder .listCaves div.cave.large,
  .popupBody .listCaves div.cave.lshort {
    width: 100%;
  }

  div.popupBody div.list.serviceList {
    overflow-x: auto;
  }
  div.popupBody div.list.serviceList header,
  div.popupBody div.list.serviceList .listItem {
    min-width: 700px;
  }
  div.popupBody div.record.five .column {
    width: 100%;
    padding: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  div.workplace div.theForm div.displayInfo p,
  div.workplace div.theForm div.displayInfo p#left {
    width: 50% !important;
    white-space: nowrap;
  }

  div.workplace div.distrPrdts .listCaves #topCaves {
    gap: 16px;
  }
  div.workplace div.theForm .listCaves div.cave {
    -ms-flex-preferred-size: 27%;
        flex-basis: 27%;
  }

  div.workplace div.prchsOrder #btmCaves {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }

  div.workplace div.prchsOrder div.list {
    overflow-x: auto;
  }

  div.workplace div.theForm div.list header,
  div.workplace div.theForm div.list .listItem {
    min-width: 900px;
  }

  div.workplace div.prchsOrder div.record.four {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  div.workplace div.prchsOrder div.record .rghtPrt,
  div.workplace div.prchsOrder div.record.four select {
    width: 100%;
  }
}

@media only screen and (max-width: 650px) {
  div.dataTables_wrapper div.dataTables_filter {
    float: right;
  }
  div.workplace #loadPage #dynamicQnd #filters {
    width: 100% !important;
  }
  div.workplace #loadPage #dynamicQnd #filters > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  div.workplace #loadPage #dynamicQnd #filters select,
  div.dataTables_wrapper div.dataTables_length select,
  div.dataTables_wrapper div.dataTables_filter input {
    width: 45% !important;
  }
  div.workplace .deposit #dynamicQnd #foundNum,
  div.workplace #loadPage #dynamicQnd #foundNum {
    width: 97%;
    margin-bottom: 16px;
  }

  div.workplace .deposit #dynamicQnd #foundNum {
    margin-bottom: 0px !important;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    margin-right: 16px;
  }
  .popUpForm div.lftPart,
  .popUpForm div.rightPrt {
    width: 100% !important;
  }
  div.workplace select,
  div.workplace input.inputText {
    width: 100% !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-left: 0px !important;
  }
  div.workplace .hint {
    margin-left: 0px !important;
  }
  div.workplace button.btnAdd {
    float: right;
  }
  div.workplace select#slcAgeParam {
    margin-top: 16px !important;
  }
  div.workplace .popUpForm.middle .content {
    width: 92% !important;
  }
  .product-tool-tip {
    bottom: unset !important;
    top: 25px !important;
  }
  div.workplace div.theForm.new-style .tablelist .record .cave .suggest {
    width: 55% !important;
  }
  div.workplace div.theForm.new-style .tablelist .record .cave {
    min-width: 100px !important;
    width: 100%;
  }
  div.workplace div.theForm.new-style .record.three .tablelist .record .cave {
    border-right: 1px solid #ccc !important;
  }
  div.workplace div.theForm.new-style .tablelist .record .cave.middle {
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record.header {
    width: 50% !important;
    gap: 8px;
  }

  div.workplace div.theForm.new-style .tablelist {
    margin-bottom: 12px !important;
  }

  div.workplace div.theForm.newPurchasePage .tablelist {
    width: 100%;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record.header .cave {
    padding: 10px 3px;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record .cave {
    padding: 5px 3px;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record {
    width: 65%;
    gap: 0px;
    margin-right: 3px !important;
  }

  div.workplace div.theForm.new-style .tablelist .table-container .record:last-of-type {
    margin-left: 8px !important;
  }

  div.workplace div.theForm.new-style .tablelist .record .add-ToList {
    padding: 8px 0px !important;
  }
  div.workplace div.theForm div.record div.switch {
    margin-right: 5px !important;
  }
  div.workplace div.theForm div.record span.check {
    margin-left: 0px !important;
  }
  div.workplace div.steps p {
    padding: 0px 5px !important;
  }
  div.workplace div.theForm div.record.last {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-flow: row !important;
            flex-flow: row !important;
  }
  div.workplace .customers select {
    width: 25% !important;
  }
}

@media only screen and (max-width: 600px) {
  .listCaves .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  div.workplace #loadPage #command {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  div.workplace #loadPage #command .buttons.spec {
    width: 100% !important;
  }

  div.workplace #loadPage #command .buttons.spec a {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  div.workplace #command #searchBox {
    width: 100% !important;
    margin-bottom: 8px;
  }
  div.workplace #command #searchBox input {
    width: 100% !important;
  }
  .table-wrapper {
    overflow-x: auto;
    width: 100% !important;
    padding-top: 8px;
  }
  div.workplace .receivable #dynamicQnd #foundNum,
  div.workplace .deposit #dynamicQnd #foundNum,
  div.workplace .customers #dynamicQnd #foundNum {
    width: 97% !important;
  }
  div.workplace div.buttons a.btnAddNew,
  div.workplace .receivable #dynamicQnd #filters,
  div.workplace .deposit #dynamicQnd #filters,
  div.workplace .customers #dynamicQnd #filters {
    float: unset !important;
    width: 100% !important;
  }
  div.workplace div.buttons {
    width: 100% !important;
    overflow: hidden;
  }
  div.workplace .receivable #command #searchBox,
  div.workplace .deposit #command #searchBox,
  div.workplace .quotations #command #searchBox {
    width: 100% !important;
    margin-bottom: 8px;
  }
  div.workplace .receivable #command #searchBox input.srchInput,
  div.workplace .deposit #command #searchBox input.srchInput,
  div.workplace .quotations #command #searchBox input.srchInput {
    padding-right: 7%;
  }
  div.workplace .receivable div.buttons a.btnAddNew,
  div.workplace .deposit div.buttons a.btnAddNew,
  div.workplace .quotations div.buttons a.btnAddNew {
    width: 88% !important;
  }
  div.workplace .customers #dynamicQnd #filters div:last-of-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  div.workplace .quotations #dynamicQnd #filters {
    width: 100% !important;
    float: unset !important;
  }
  div.workplace #loadPage #dynamicQnd #filters label {
    width: auto !important;
    margin-bottom: 3.5% !important;
  }
  div.workplace .quotations #dynamicQnd #foundNum {
    width: 97% !important;
    margin-bottom: 0px !important;
  }

  div.workplace div.product.update #topCaves {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  div.workplace div.product.update #topCaves .cave {
    width: 100%;
  }

  div.workplace div.product.update #topCaves .cave select {
    margin-bottom: 8px;
  }
}

@media only screen and (max-width: 530px) {
  div.workplace div.receivable-form div.record .column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }

  div.workplace div.receivable-form div.record .column .rghtPrt {
    width: 100%;
  }

  div.workplace .purchase .record .col.third .row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }

  .newPurchasePage .record .col .switch-div {
    margin-left: 0px !important;
  }

  div.workplace .purchase .record .col.third .row .col {
    width: 100%;
  }

  div.workplace div.distrPrdts .listCaves #topCaves,
  div.workplace div.distrPrdts div.record,
  div.workplace div.distrPrdts div.record .column,
  div.workplace div.distrPrdts .listCaves div.cave {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100% !important;
  }

div.workplace div.distrPrdts .listCaves #topCaves {
  margin-top: 8px;
}

  div.workplace div.theForm div.record .rghtPrt,
  div.workplace div.distrPrdts .listCaves div.cave input,
  div.workplace div.distrPrdts .listCaves div.cave select,
  div.workplace div.distrPrdts div.record .column input,
  div.workplace div.distrPrdts div.record .column select {
    width: 100%;
  }

  div.workplace div.distrPrdts .listCaves div.cave.has-check {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-bottom: 8px;
  }
}

@media only screen and (max-width: 500px) {
  div.dataTables_wrapper div.dataTables_length {
    width: 100%;
  }

  div.workplace div.steps a {
    width: 50% !important;
    text-decoration: none;
  }

  div.dataTables_wrapper div.dataTables_filter label,
  div.dataTables_wrapper div.dataTables_length label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  div.dataTables_wrapper div.dataTables_filter input,
  div.dataTables_wrapper div.dataTables_length select {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
    margin-left: 10px;
    margin-right: 0px !important;
    width: 100%;
  }

  div.dataTables_wrapper div.dataTables_filter input {
    width: 76% !important;
  }

  div.dataTables_wrapper div.dataTables_filter {
    width: 100%;
  }

  div.workplace div.theForm div.list header,
  div.workplace div.theForm div.list .listItem {
    min-width: 750px;
  }

  div.workplace div.distrPrdts div.list {
    overflow-x: auto;
  }

  div.workplace .prchsOrder input.inputText {
    width: 100% !important;
  }
}

@media screen and (max-width: 916px) {
  div.workplace #loadPage #dataTable a.change {
    margin-right: 0 !important;
  }
  .responsive-v2 td select {
    width: 44%;
  }
  .responsive-v2 td input {
    width: 41%;
  }

  .responsive-v2 td.has-addon select,
  .responsive-v2 td.has-addon input {
    width: 33%;
  }
  .responsive-v2 {
    border: 0;
  }

  .responsive-v2 caption {
    font-size: 1.3em;
  }

  .responsive-v2 tr {
    border-bottom: 3px solid #ddd;
    margin-bottom: .625em;
  }

  .responsive-v2 td {
    border-bottom: 1px solid #ddd;
    font-size: 1em;
  }

  .responsive-v2 td:last-child {
    border-bottom: 0;
  }
}

.responsive-v1 {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: white;
}


.responsive-v1 td, .responsive-v1 th {
    padding: 8px;
    border-left: 1px dotted #999 !important;
}

.responsive-v1 td {
    font-size: 14px;
}

.responsive-v1 th  {
  font-size: 15px;
}

.responsive-v1 thead th {
    background: #c4e8ec;
    color: #383b40 !important;
    font-weight: bold;
    font-size: 14px !important;
}

.responsive-v1 tr:nth-child(even) {
  background-color: #f3f3f3;
}

/* Responsive */

@media (max-width: 830px) {

}

/* New Addition End */
div.workplace div.theForm div.list div.tooltip {
  position: absolute;
  left: 15%;
  top: 100%;
  margin-top: 5%;
  padding: 5px 20px;
  background-color: #3a2621;
  color: #fff;
  text-align: center;
  font-size: 0.85em;
  display: inline;
  z-index: 1;
}
div.workplace div.theForm div.list div.listItem div.tooltip:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #f2d183 transparent;
}
div.popupBody a.addToList {
  margin-top: 30px;
}
div.popupBody a.addToList,
.popUpLabelMy,
div.workplace div.theForm a.addToList,
div.workplace div.theForm button.addToList {
  float: left;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 0.85em;
  color: #fff;
  background: #057e7c;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  background: #015958;
}
div.popupBody a.addToList.second,
div.workplace div.theForm a.addToList.second {
  margin-left: 10px;
}
div.popupBody a.addToList.small,
div.workplace div.theForm a.addToList.small {
  width: auto;
  padding: 0 20px;
}
div.popupBody a.addToList:hover,
.popUpLabelMy:hover,
div.workplace div.theForm a.addToList:hover,
div.workplace div.theForm button.addToList:hover {
  background-color: #3a2621;
  background: #0b8887;
}
div.popupBody a.addToList:focus,
.popUpLabelMy:focus,
div.workplace div.theForm div.cave a.addToList:focus,
div.workplace div.theForm button.addToList:focus {
  outline: none;
}
div.workplace div.theForm div.innerRow.last a.addToList,
div.workplace div.theForm div.innerRow.last button.addToList {
  float: right;
  width: 30%;
  margin-right: 2%;
}
div.workplace div.theForm div.innerRow button.addToList {
  border: none;
  outline: none;
}
/* -- the list -- */
div.popupBody div#header,
div.workplace div.theForm div#header {
  float: left;
  width: auto;
  padding: 1% 0;
  /*font-family: raspoutine;*/
  color: #333;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 0.3px;
}
div.popupBody div#header label.error,
div.workplace div.theForm div#header label.error {
  font-family: leelawadee;
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: normal;
}
div.popupBody div.list,
div.workplace div.theForm div.list {
  float: left;
  width: 100%;
  margin-bottom: 1%;
  counter-reset: section;
  border: 1px solid #cacaca;
  border-bottom: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.popupBody div.list header,
div.popupBody div.list div.listItem,
div.workplace div.theForm div.list header,
div.workplace div.theForm div.list div.listItem {
  float: left;
  width: 100%;
  border-bottom: 1px solid #cacaca;
}
div.popupBody div.list:nth-child(odd),
div.workplace div.theForm div.list div.listItem:nth-child(odd) {
  background: #f7f7f7;
}
div.popupBody div.list header,
div.workplace div.theForm div.list header {
  background: #e5e5e5;
}
div.popupBody div.list div.cave,
div.workplace div.theForm div.list div.cave {
  position: relative;
  float: left;
  width: auto;
  margin-left: 1%;
  font-size: 0.85em;
  border-right: 1px solid #cacaca;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.popupBody div.list header div.cave,
div.workplace div.theForm div.list header div.cave {
  height: 30px;
  line-height: 30px;
}
div.popupBody div.list div.listItem div.cave,
div.workplace div.theForm div.list div.listItem div.cave {
  height: 28px;
  line-height: 28px;
}
div.popupBody div.list div.cave.serial,
div.workplace div.theForm div.list div.cave.serial {
  width: 5%;
}
div.popupBody div.list div.listItem div.cave.serial::before,
div.workplace div.theForm div.list div.listItem div.cave.serial::before {
  counter-increment: section;
  content: counter(section) ".";
}
div.popupBody div.list div.cave.xxxjumbo,
div.workplace div.theForm div.list div.cave.xxxjumbo {
  width: 60%;
}
div.popupBody div.list div.cave.jumbo,
div.workplace div.theForm div.list div.cave.jumbo {
  width: 42.48%;
}
div.popupBody div.list div.cave.xlarge,
div.workplace div.theForm div.list div.cave.xlarge {
  width: 35.4%;
}
div.popupBody div.list div.cave.large,
div.workplace div.theForm div.list div.cave.large {
  width: 28.32%;
}
div.popupBody div.list div.cave.medium,
div.workplace div.theForm div.list div.cave.medium {
  width: 21.24%;
}
div.popupBody div.list div.cave.smedium,
div.workplace div.theForm div.list div.cave.smedium {
  width: 19%;
}
div.popupBody div.list div.cave.small,
div.workplace div.theForm div.list div.cave.small {
  width: 14.16%;
}
div.popupBody div.list div.cave.vsmall,
div.workplace div.theForm div.list div.cave.vsmall {
  width: 9.16%;
}
div.popupBody div.list div.cave.tiny,
div.workplace div.theForm div.list div.cave.tiny {
  width: 7.08%;
}
div.popupBody div.list div.cave.stiny,
div.workplace div.theForm div.list div.cave.stiny {
  width: 5.08%;
}
div.popupBody div.list div.cave.vtiny,
div.workplace div.theForm div.list div.cave.vtiny {
  width: 4.04%;
}
div.popupBody div.list div.cave.border-less,
div.workplace div.theForm div.list div.cave.border-less {
  border-right: none;
}
div.popupBody div.list div.cave:last-child,
div.workplace div.theForm div.list div.cave:last-child {
  width: 10%;
  border: none;
}
div.popupBody div.list div.cave input,
div.workplace div.theForm div.list div.cave input {
  width: 88%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: default;
}
div.workplace div.theForm div.list div.cave label.listIcon {
  color: #1f6d03;
  cursor: pointer;
}
div.popupBody div.list div.cave input:focus,
div.workplace div.theForm div.list div.cave input:focus {
  outline: none;
}
div.popupBody div.list div.cave input.changeable,
div.workplace div.theForm div.list div.cave input.changeable {
  width: 90%;
  padding-left: 6px;
  border: 1px solid #cccccc;
  background: #fff;
}
div.popupBody div.list div.cave input.changeable {
  width: 85%;
  padding-left: 3px;
}
div.workplace div.showRecord div.box a#remove,
div.popupBody div.list div.cave a#remove,
div.workplace div.theForm div.list div.cave a#remove {
  float: left;
  width: 16px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  text-decoration: none;
  cursor: pointer;
  background: url(../images/system/b_delete.png) left center no-repeat;
}
div.popupBody div.list div.cave a#approve,
div.workplace div.showRecord div.box a#approve,
div.workplace div.theForm div.list div.cave a#approve {
  float: left;
  width: 16px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  text-decoration: none;
  cursor: pointer;
  background: url(../images/system/b_approve.png) left center no-repeat;
}
div.popupBody div.list div.cave a#update,
div.workplace div.showRecord div.box label#update,
div.workplace div.showRecord div.box a#update,
div.workplace div.theForm div.list div.cave a#update {
  float: left;
  width: 16px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  text-decoration: none;
  cursor: pointer;
  background: url(../images/system/b_edit.png) left center no-repeat;
}
div.workplace div.popupBody .downloadExcel {
  width: 100%;
  padding-top: 3%;
  clear: both;
}
div.workplace div.popupBody .downloadExcel a {
  width: 100%;
  padding: 1% 3%;
  background-color: #3a2621;
  border-radius: 4px;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
div.workplace div.popupBody .downloadExcel a:hover {
  background-color: #057e7c;
}
div.workplace div.popupBody .downloadExcel a i {
  margin-right: 1%;
}
/* -- */
.popupBody div.displayInfo,
div.workplace div.theForm div.displayInfo {
  float: left;
  width: 100%;
  margin: 0.5% 0 0;
  display: none;
  font-family: leelawadee;
}
div.workplace div.theForm div.record div.column.long div.displayInfo.long {
  width: 80%;
  margin-left: 14.8%;
}
.popupBody div.displayInfo label#header,
div.workplace div.theForm div.displayInfo label#header {
  float: left;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding-left: 15px;
  font-size: 0.9em;
  color: #fff;
  background: #777;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody div.displayInfo div.infoWrap,
div.workplace div.theForm div.displayInfo div.infoWrap {
  float: left;
  width: 100%;
  background: #fff;
  border: 1px dotted #777;
  border-top: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody div.displayInfo p,
div.workplace div.theForm div.displayInfo p {
  float: left;
  width: 65%;
  padding: 0 15px;
  min-height: 25px;
  line-height: 24px;
  font-size: 0.85em;
  font-style: italic;
  border-left: 1px dotted #999;
  border-bottom: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody div.displayInfo p#left,
div.workplace div.theForm div.displayInfo p#left {
  width: 35%;
  border-left: none;
}
div.workplace div.theForm div.record div.displayInfo.long p {
  width: 75%;
}
div.workplace div.theForm div.record div.displayInfo.long p#left {
  width: 25%;
}
div.workplace div.theForm div.displayInfo p#pDetails {
  padding: 8px 15px;
  line-height: 20px;
}
div.workplace div.theForm div.displayInfo p:last-child,
div.workplace div.theForm div.displayInfo p:nth-last-child(2) {
  border-bottom: none;
}
/*display info for product*/
/* -- */
div.workplace div.theForm div.displayInfo.product {
  float: right;
  width: 34%;
  margin: -12% 0 0;
  display: none;
}
div.workplace div.theForm div.column.long div.displayInfo.product.long {
  width: 50%;
  margin-left: 14.8%;
}
div.workplace div.theForm div.displayInfo.product label#header {
  float: left;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding-left: 15px;
  font-size: 0.9em;
  color: #fff;
  background: #777;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.theForm div.displayInfo.product div.infoWrap {
  float: left;
  width: 100%;
  background: #fff;
  border: 1px dotted #777;
  border-top: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.theForm div.displayInfo.product p {
  float: left;
  width: 60%;
  padding: 0 15px;
  min-height: 25px;
  line-height: 24px;
  font-size: 0.85em;
  font-style: italic;
  border-left: 1px dotted #999;
  border-bottom: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.theForm div.displayInfo.product p#left {
  width: 40%;
  border-left: none;
}
div.workplace div.theForm div.displayInfo.product.long p {
  width: 75%;
}
div.workplace div.theForm div.displayInfo.product.long p#left {
  width: 25%;
}
div.workplace div.theForm div.displayInfo.product p#pDetails {
  padding: 8px 15px;
  line-height: 20px;
}
div.workplace div.theForm div.displayInfo.product p:last-child,
div.workplace div.theForm div.displayInfo.product p:nth-last-child(2) {
  border-bottom: none;
}
div.workplace div.theForm fieldset div.displayInfo.product {
  margin-top: -15%;
  width: 40%;
}
/* --- input file for image upload --- */
.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile + label {
  max-width: 100%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}
.inputfile.second + label {
  margin-left: 10px;
}
.no-js .inputfile + label {
  display: none;
}
.inputfile + label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  margin-right: 0.25em;
}
.inputfile6 + label {
  color: #1a2758;
}
.inputfile6 + label {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}
.inputfile6 + label span,
.inputfile6 + label strong {
  padding: 8px 15px;
}
.inputfile6 + label span {
  width: 100px;
  display: inline-block;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  font-size: 0.9em;
}
.inputfile6 + label strong {
  height: auto;
  color: #fff;
  background-color: #8a8276;
  display: inline-block;
  font-size: 0.9em;
  border-radius: 0 1px 1px 0;
  -moz-border-radius: 0 1px 1px 0;
  -webkit-border-radius: 0 1px 1px 0;
}
.inputfile6:focus + label strong,
.inputfile6.has-focus + label strong,
.inputfile6 + label:hover strong {
  background-color: #ccc;
  color: #333;
}

div.workplace div.theForm div.record span.check,
div.workplace div.theForm div.record span.currency {
  float: left;
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  font-size: 0.9em;
  color: #444444;
  cursor: pointer;
}

div.workplace div.theForm.vendorDeposit span.currency {
  display: none;
}

/* ----------------------------------------------------------- */
/* ----------------------- show Record ----------------------- */
/* ----------------------------------------------------------- */
div.workplace div.showRecord {
  float: left;
  width: 92%;
  margin: 1.5% 2%;
  padding: 1% 2%;
  font-size: 0.95em;
  min-height: 300px;
  background: #fff;
}
div.workplace div.showRecord #leftSide {
  float: left;
  width: 64%;
}
div.workplace div.showRecord #leftSide.right {
  float: right;
  width: 29%;
  margin: 0 1%;
}
div.workplace div.showRecord #leftSide.right div.down {
  margin-top: 27%;
}
div.workplace div.showRecord #leftSide.left {
  float: left;
  width: 40%;
}
div.workplace div.showRecord #rightSide {
  float: right;
  width: 28%;
}
div.workplace div.showRecord #rightSide::after {
    content: "";
    clear: both;
    display: table;
}
/**/
.workplace .showRecord .show-case {
  width: 90%;
  float: left;
  margin-top: 2%;
  padding: 5%;
  background: #015958;
  color: #fff;
  text-align: center;
}
.workplace .showRecord .showCutomerHistoryBtn {
  position: absolute;
  right: 2%;
  padding-left: 20px;
  background: #008f8c;
  padding: 10px;
  margin-top: 5px;
  color: #fff;
  font-size: 1.1em;
  cursor: pointer;
}
.workplace .showRecord .show-case .case-inner {
  width: 100%;
  text-decoration: none;
  display: block;
  text-transform: capitalize;
  font-size: 1em;
  font-weight: normal;
}
.workplace .showRecord .show-case .case-inner.invoice-balance {
  font-size: 3em;
}
.workplace .showRecord .show-case.client .case-inner {
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  cursor: pointer;
}
.workplace .showRecord .show-case.client {
  padding: 3% 5%;
}

/**/
.workplace .showRecord .semi-detail {
  width: 100%;
  float: left;
  border: 1px dotted #999;
  margin-top: 5%;
}
.workplace .showRecord .semi-detail .semi-header {
  float: left;
  width: 96%;
  padding: 1.5% 2%;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: #e6e6e6;
}
.workplace .showRecord .semi-detail span {
  width: 95%;
  display: inline;
  float: left;
  padding: 0 1%;
}
.workplace .showRecord .semi-detail span.large {
  width: 80%;
}
.workplace .showRecord .semi-detail span.small {
  width: 15%;
}
.workplace .showRecord .semi-detail span:last-child {
  border-right: none;
}
.workplace .showRecord .semi-detail label {
  float: right;
  margin-left: 10px;
  width: 5% !important;
  height: 20px;
  line-height: 20px;
  color: #3055b5;
  cursor: pointer;
  text-decoration: none;
  display: inline;
}
.workplace .showRecord .semi-detail label:before {
  position: relative;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1.1em;
  content: "\f067";
  color: #3055b5;
  float: right;
}
.workplace .showRecord .semi-detail .semi-row {
  position: relative;
  float: left;
  width: 100%;
  font-size: 0.9em;
  border-bottom: 1px dotted #999;
}

.workplace .showRecord .semi-detail .semi-row:last-child {
  border-bottom: none;
}
.workplace .showRecord .semi-detail .semi-col-left {
  float: left;
  width: 5%;
  margin-left: 2%;
  padding: 1% 0;
}
.workplace .showRecord .semi-detail .semi-col-right {
  float: left;
  width: 70%;
  padding: 1% 2%;
  min-height: 20px;
  color: #666;
  border-left: 1px dotted #999;
  border-right: 1px dotted #999;
}
/**/
div.workplace div.showRecord #leftSide header {
  float: left;
  width: 95.7%;
  padding: 1.1% 2%;
  /*font: 600 0.95em raspoutine;*/
  letter-spacing: 0.8px;
  background: #e6e6e6;
  border: 1px dotted #999;
}
div.workplace div.showRecord div.details {
  float: left;
  width: 99.7%;
  border: 1px dotted #999;
  border-top: none;
}
div.workplace div.showRecord #leftSide div#separate,
div.workplace div.showRecord #leftSide div#separate.responsive {
  float: left;
  width: 100%;
  height: 12px;
  border-bottom: 1px dotted #bbb;
}
div.workplace div.showRecord div.details.responsive,
div.workplace div.showRecord #leftSide div#separate.responsive {
  display: none;
}
div.workplace div.showRecord #leftSide .record {
  position: relative;
  float: left;
  width: 100%;
  font-size: 0.9em;
  border-bottom: 1px dotted #999;
}
div.workplace div.showRecord #leftSide .record:last-child {
  border-bottom: none;
}
div.workplace div.showRecord #leftSide .colLeft {
  float: left;
  width: 28%;
  margin-left: 2%;
  padding: 1% 0;
}
div.workplace div.showRecord #leftSide .colRight {
  float: right;
  width: 70%;
  padding: 1% 2%;
  min-height: 27px;
  color: #666;
  border-left: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.showRecord #leftSide .colRight.no-padding {
  padding: 0;
}
div.workplace div.showRecord #leftSide .colRight p {
  float: left;
  width: 100%;
  margin: 0 0 1.5%;
  position: relative;
}
div.workplace div.showRecord #leftSide .colRight label.link {
  position: absolute;
  right: 0;
  padding-left: 20px;
  text-decoration: underline;
  background: url(../images/system/discount.png) left center no-repeat;
  cursor: pointer;
}
div.workplace div.showRecord #leftSide .colRight label.link_colored {
  position: absolute;
  right: 2%;
  padding-left: 20px;
  text-decoration: underline;
  background: url(../images/system/discount.png) left center no-repeat;
  cursor: pointer;
  color: #015958;
}
div.workplace div.showRecord #leftSide .colRight label.link_edit {
  position: absolute;
  right: 2%;
  padding-left: 20px;
  text-decoration: underline;
  background: url(../images/system/b_edit.png) left center no-repeat;
  cursor: pointer;
  color: #015958;
}
div.workplace div.showRecord #leftSide .colRight .link_store {
  position: absolute;
  right: 2%;
  padding-left: 20px;
  text-decoration: underline;
  background: url(../images/system/b_store.png) left center no-repeat;
  cursor: pointer;
}
div.workplace div.showRecord #leftSide .colRight label.link_editWithOutIcon {
  position: absolute;
  right: 2%;
  padding-left: 20px;
  text-decoration: underline;
  cursor: pointer;
}
div.workplace div.showRecord #leftSide .colRight p.half {
  width: 49%;
}
div.workplace div.showRecord #leftSide .colRight p.quarter {
  width: 20%;
}
div.workplace div.showRecord #leftSide .colRight div.clear {
  float: left;
  width: 100%;
  height: 2px;
}
div.workplace div.showRecord #leftSide .colRight.remarks {
  line-height: 20px;
}
div.workplace div.showRecord #leftSide .colRight.remarks ul,
div.workplace div.showRecord #leftSide .colRight.remarks ol {
  float: left;
  margin-left: 18px;
}
div.workplace div.showRecord #leftSide span.status {
  padding: 1px 10px 3px;
  font-size: 0.95em;
  color: #111;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
div.workplace div.showRecord #leftSide span.status.active {
  background-color: #75ed93;
}
div.workplace div.showRecord #leftSide span.status.pending {
  background-color: #d7d7d7;
}
div.workplace div.showRecord #leftSide span.status.suspended,
div.workplace div.showRecord #leftSide span.status.returned {
  background-color: #ff8000;
  color: #fff;
}
div.workplace div.showRecord #leftSide span.status.cancelled {
  background-color: #db0101;
  color: #fff;
}
div.workplace div.showRecord #leftSide span.status.open {
  background-color: #db0101;
  color: #fff;
}
div.workplace div.showRecord #leftSide span.status.shipped {
  background-color: #d7d7d7;
}
div.workplace div.showRecord #leftSide span.status.delivered {
  background-color: #75ed93;
}

div.workplace div.showRecord #leftSide .colRight p#notFound {
  margin: 0;
  padding: 8px 10px;
  font-style: italic;
  color: #888;
  border-bottom: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.showRecord #leftSide div.cave-row {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
div.workplace div.showRecord #leftSide div.cave-row:last-child {
  border-bottom: none;
}
div.workplace div.showRecord #leftSide div.cave-row div.cave {
  position: relative;
  float: left;
  width: 25%;
  padding-left: 3%;
  height: 30px;
  line-height: 30px;
  border-left: 1px dotted #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.showRecord #leftSide div.cave-row div.cave.small {
  width: 33%;
}
div.workplace div.showRecord #leftSide div.cave-row div.cave.medium {
  width: 50%;
}
div.workplace div.showRecord #leftSide div.cave-row div.cave:first-child {
  border-left: none;
}
div.workplace div.showRecord #leftSide label.addNew {
  float: left;
  position: relative;
  margin: 2%;
  color: #665132;
  cursor: pointer;
}
div.workplace div.showRecord #leftSide label.addNew:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f067";
}
div.workplace div.showRecord #rightSide div.imgHolder {
  float: left;
  width: 35%;
  margin: 5% 0 2%;
  border: 1px solid #999;
}
div.workplace div.showRecord #rightSide div.imgHolder img {
  float: left;
  width: 100%;
  height: 105px;
  border: none;
}
div.workplace div.showRecord #rightSide a#back {
  width: auto;
  margin: 0 0 3%;
  padding: 0 8%;
}
div.workplace div.showRecord #rightSide a#print {
  float: left;
  margin: 0 2%;
  padding-left: 1%;
  height: 32px;
  line-height: 32px;
  color: #665132;
  cursor: pointer;
  text-decoration: none;
}
div.workplace div.showRecord #rightSide a#print::before {
  position: relative;
  left: -5px;
  font-family: FontAwesome;
  content: "\f02f";
  font-size: 1.1em;
}
/* -- print-drop-down */
div.workplace div.showRecord #rightSide .print-list {
  position: relative;
  float: left;
  width: 25%;
  padding-left: 50px;
  height: 30px;
  line-height: 30px;
  color: #665132;
  border: 1px solid #ccc;
  cursor: pointer;
}
div.workplace div.showRecord #rightSide .print-list::before,
div.workplace div.showRecord #rightSide .print-list::after {
  position: absolute;
  font-family: FontAwesome;
  content: "\f02f";
  width: 38px;
  text-align: center;
}
div.workplace div.showRecord #rightSide .print-list::before {
  left: 0;
  border-right: 1px solid #ddd;
}
div.workplace div.showRecord #rightSide .print-list::after {
  content: "\f107";
  width: 28px;
  right: 0;
  font-weight: 600;
}
div.workplace div.showRecord #rightSide .print-list label {
  cursor: pointer;
}
div.workplace div.showRecord #rightSide .print-drop-down {
  position: absolute;
  margin-top: 33px;
  width: 260px;
  padding: 10px 0;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}
div.workplace div.showRecord #rightSide .print-drop-down a {
  display: block;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
  font-size: 0.9em;
  color: #665132;
  text-decoration: none;
}
div.workplace div.showRecord #rightSide .print-drop-down a:hover {
  background-color: #ddd;
}
div.workplace div.showRecord #rightSide h3#title {
  float: left;
  width: 88.9%;
  padding: 2% 5%;
  color: #fff;
  /*font: 0.95em raspoutine;*/
  background: #8b8b8b;
  border: 1px dotted #000;
}
div.workplace div.showRecord #rightSide div.details {
  float: left;
  width: 98.9%;
  background: #f2f2f2;
  border: 1px dotted #bbb;
  border-top: none;
  border-bottom: none;
}
div.workplace div.showRecord #rightSide #record {
  float: left;
  width: 90%;
  padding: 3% 5%;
  font-size: 0.9em;
  border-bottom: 1px dotted #bbb;
}
div.workplace div.showRecord #rightSide p,
div.workplace div.showRecord #rightSide label {
  float: left;
  width: 90%;
  margin: 0 0 1%;
}
div.workplace div.showRecord #rightSide p {
  font-weight: 600;
}
/* -- profile -- */
div.workplace div.showRecord #rightSide div#prflePic {
  position: relative;
  float: left;
  width: 51%;
  margin: 0 0 2%;
}
div.workplace div.showRecord #rightSide div.imgWrap {
  float: left;
  width: 100%;
  border: 1px solid #999;
}
div.workplace div.showRecord #rightSide div.imgWrap img {
  float: left;
  width: 100%;
  border: none;
}
div.workplace div.showRecord div.imgWrap .progressBar {
  background: none repeat scroll 0 0 #e0e0e0;
  padding: 3px 0;
  top: 45%;
  position: absolute;
  width: 100%;
  display: none;
}
div.workplace div.showRecord div.imgWrap .progressBar .bar {
  width: 0;
  height: 14px;
  background-color: #b86a16;
}
div.workplace div.showRecord div.imgWrap .progressBar .percent {
  display: inline-block;
  left: 0;
  position: absolute;
  text-align: center;
  top: 2px;
  width: 100%;
}
div.workplace div.showRecord div.imgWrap div#imgChange {
  float: left;
  background: #3055b5;
  color: #fff;
  font-size: 0.8em;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 100%;
  border-top: 1px solid #999;
  cursor: pointer;
  z-index: 100;
}
div.workplace div.showRecord div.imgWrap div#imgChange input[type="file"] {
  cursor: pointer;
  height: 30px;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  width: 100%;
  z-index: 100;
}
div.workplace div.showRecord div#prflePic a#remove {
  float: left;
  margin-top: 5%;
  padding-left: 20px;
  text-decoration: none;
  cursor: pointer;
  background: url(../images/system/b_delete.png) left 1px no-repeat;
}
/* --- show user -- */
div.workplace div.showRecord div#rights {
  float: left;
  width: 100%;
}
div.workplace div.showRecord div#rights div.userRights {
  float: left;
  width: 19%;
  margin: 2% 0;
}
div.workplace div.showRecord div.userRights:first-child {
  margin: 2% 0 2% 2%;
}
div.workplace div.showRecord div.userRights fieldset {
  float: left;
  width: 90%;
  margin-bottom: 10px;
  padding: 3% 1%;
  border: 1px solid #ccc;
}
div.workplace div.showRecord div.userRights fieldset.second {
  margin-top: 10px;
}
div.workplace div.showRecord div.userRights fieldset legend {
  position: relative;
  margin-left: 10px;
  padding: 6px 20px;
  color: #333333;
  font-size: 0.9em;
  border: 1px solid #ccc;
}
div.workplace div.showRecord div.userRights fieldset > div {
  float: left;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 1%;
}
div.workplace div.showRecord div.userRights fieldset > div:last-child {
  margin-bottom: 2%;
}
div.workplace div.showRecord div.userRights span {
  float: left;
  width: 16px;
  height: 16px;
  margin: 1.2% 0 1% 1%;
  color: #4bb966;
}
div.workplace div.showRecord div.userRights span.red {
  color: #db0101;
}
div.workplace div.showRecord div.userRights label {
  float: left;
  margin: 1% 0 1% 3%;
  font-size: 0.9em;
  color: #333;
}
/***********/
.popupBody .label-cbx,
div.workplace div.theForm .label-cbx {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.checkbox.second {
  margin-left: 2%;
}
.popupBody .label-cbx input:checked + .checkbox,
div.workplace div.theForm .label-cbx input:checked + .checkbox {
  border-color: #015958;
}
div.workplace div.theForm.purchase .label-cbx input:checked + .checkbox {
  border-color: #057e7c;
}
.popupBody .label-cbx input:checked + .checkbox svg path,
div.workplace div.theForm .label-cbx input:checked + .checkbox svg path {
  fill: #015958;
}
div.workplace
  div.theForm.purchase
  .label-cbx
  input:checked
  + .checkbox
  svg
  path {
  fill: #057e7c;
}
.popupBody .label-cbx input:checked + .checkbox svg polyline,
div.workplace div.theForm .label-cbx input:checked + .checkbox svg polyline {
  stroke-dashoffset: 0;
}
.popupBody .label-cbx:hover .checkbox svg path,
div.workplace div.theForm .label-cbx:hover .checkbox svg path {
  stroke-dashoffset: 0;
}
.popupBody .checkbox svg,
div.workplace div.theForm .checkbox svg {
  width: 20px;
  height: 20px;
}
.popupBody .label-cbx .checkbox,
div.workplace div.theForm .label-cbx .checkbox {
  position: relative;
  float: left;
  margin-top: 2px;
  margin-right: 10px;
  width: 18px !important;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.check-wraper {
  width: 14% !important;
  float: left;
}
.popupBody .label-cbx .checkbox svg,
div.workplace div.theForm .label-cbx .checkbox svg {
  position: absolute;
  top: -1px;
  left: -1px;
}

.popupBody .label-cbx .checkbox svg path,
div.workplace div.theForm .label-cbx .checkbox svg path {
  fill: none;
  stroke: #015958;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 71px;
  stroke-dashoffset: 71px;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
div.workplace div.theForm.purchase .label-cbx .checkbox svg path {
  stroke: #057e7c;
}
.popupBody .label-cbx .checkbox svg polyline,
div.workplace div.theForm .label-cbx .checkbox svg polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 18px;
  stroke-dashoffset: 18px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.popupBody .label-cbx > span,
div.workplace div.theForm .label-cbx > span {
  font-size: 0.9em;
  vertical-align: middle;
}
.popupBody .invisible,
div.workplace div.theForm .invisible {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  opacity: 0;
  display: none;
}

/**********/
/* --- popup form -- */
div.workplace .state {
  position: absolute;
  top: 0;
  left: -100vw;
}
div.workplace .state:checked ~ .content {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
div.workplace .state:checked ~ .backdrop {
  bottom: 0;
  opacity: 1;
  z-index: 1;
}
div.workplace .popUpForm {
  position: fixed;
  top: 30px;
  right: 0;
  left: 0;
  height: 0;
  z-index: 3000;
}
div.workplace .popUpForm.vlarger .content {
  width: 83%;
}
div.workplace .popUpForm.vlarge .content {
  width: 90%;
}
div.workplace .popUpForm.large .content {
  width: 830px;
}
div.workplace .popUpForm.middle .content {
  width: 600px;
}
div.workplace .popUpForm.five-height .content {
  min-height: 500px;
}
div.workplace .popUpForm.three-height .content {
  min-height: 300px;
}
div.workplace .popUpForm.less-down {
  top: 50px;
}
div.workplace .popUpForm.vless-down {
  top: 30px;
}
div.workplace .popUpForm.top-down {
  top: 80px;
}
div.workplace .popUpForm .content {
  overflow: hidden;
  position: relative;
  z-index: 2000;
  width: 98%;
   width: 50%;
  max-height: 95vh;
  margin: 20px auto;
  background: #fff;
  overflow-y: auto;
  -webkit-transform: translateY(-200%);
  -ms-transform: translateY(-200%);
  transform: translateY(-200%);
  -webkit-transition: 0.3s -webkit-transform ease-in-out;
  transition: 0.3s -webkit-transform ease-in-out;
  -o-transition: 0.3s transform ease-in-out;
  transition: 0.3s transform ease-in-out;
  transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out;
  font-size: 16px;
}
div.workplace .popUpForm.jumbo .content {
  width: 1024px;
}
div.workplace .popUpForm.large .content {
  width: 830px;
}
div.workplace .popUpForm.middle .content {
  width: 600px;
}
div.workplace .popUpForm.three-height .content {
  min-height: 300px;
}
div.workplace .popUpForm.less-height .content {
  min-height: 50px;
  max-height: 600px;
}
.popUpForm div.header {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 3%;
  height: 36px;
  line-height: 36px;
  color: #000;
  background-color: #ddd;
  border-bottom: 1px solid #666;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popUpForm div.header h3 {
  float: left;
  width: 100%;
  /*font-family: raspoutine;*/
  font-size: 0.95em;
  font-weight: 500;
}
div.workplace .popUpForm div.header label.close {
  position: absolute;
  right: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 1.3em;
  font-weight: 600;
  color: #000;
  background-color: #ccc;
  cursor: pointer;
  border-bottom: 1px solid #666;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace .popUpForm div.header label.close:hover {
  background: #aaa;
}
/**/
aside.popUpForm div#totals {
  float: left;
  width: 100%;
}
aside.popUpForm div#totals div {
  float: left;
  width: 100%;
  border-bottom: 1px dotted #999;
  background: #ffffff;
}
aside.popUpForm div#totals div.top {
  border-radius: 4px 4px 0 0;
}
aside.popUpForm div#totals div.buttom {
  border-radius: 0 0 4px 4px;
}
aside.popUpForm div#totals div.colorise {
  background: #d4c5a8;
  font-weight: bold;
  font-style: italic;
}
aside.popUpForm div#totals div:last-child {
  border-bottom: 1px dotted #bbbbbb;
}
aside.popUpForm div#totals label,
aside.popUpForm div#totals span {
  float: left;
  width: 20%;
  padding: 1% 3%;
  font-size: 0.9em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
aside.popUpForm div#totals label.large,
aside.popUpForm div#totals span.large {
  width: 40%;
}
aside.popUpForm div#totals label.xmiddle,
aside.popUpForm div#totals span.xmiddle {
  width: 30%;
}
aside.popUpForm div#totals label.middle,
aside.popUpForm div#totals span.middle {
  width: 25%;
}
aside.popUpForm div#totals label {
  border-right: 1px dotted #999;
}
/**/
.popupBody {
  float: left;
  width: 100%;
  padding: 2% 3%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody .tab-panel {
  float: left;
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody .tab-panel.second {
  border-top: none;
}
.popupBody div.section {
  float: left;
  width: 49%;
}
div.workplace .popUpForm.jumbo div.section {
  width: 48%;
}
.popupBody div.section.right {
  float: right;
}
.popUpForm div.row {
  float: left;
  width: 100%;
  margin-bottom: 2%;
}
.popUpForm div.row.photos {
  margin: 1%;
}
.popUpForm div.row img {
  width: 119px;
  height: 100px;
  cursor: pointer;
}
.popUpForm div.row img:hover {
  opacity: 0.7;
}
.popUpForm div.lftPart {
  float: left;
  width: 30%;
  height: 30px;
  line-height: 30px;
  font-size: 0.85em;
  color: #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody div.lftPart.full,
.popupBody div.rightPrt.full {
  width: 100%;
}
.popUpForm div.lftPart.required::after {
  content: "*";
  color: #f00;
  position: relative;
  left: 3px;
}
.popUpForm div.rightPrt {
  float: right;
  width: 70%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popUpForm div.row.text div.lftPart,
.popUpForm div.row.text div.rightPrt {
  height: auto;
  line-height: normal;
  font-size: 0.87em;
  color: #666;
}
.popUpForm div.row > p {
  float: left;
  width: 100%;
  margin: 10px 0;
}
.popUpForm a.addNew {
  float: left;
  margin-left: 10px;
  width: 28px;
  height: 29px;
  line-height: 29px;
  color: #fff;
  text-align: center;
  background-color: #999;
  text-decoration: none;
  cursor: pointer;
}
.popUpForm a.addNew:before {
  position: relative;
  font-family: FontAwesome;
  content: "\f067";
}
.popupBody span#clear {
  float: left;
  width: 100%;
  height: 10px;
  border-top: 1px dotted #999;
}
/* -- */
.popUpForm div.idnttyWrap {
  float: left;
  width: 18%;
  height: 90px;
  margin-right: 2%;
  margin-bottom: 2%;
  text-align: center;
  border: 1px solid #666;
  cursor: pointer;
}
div.workplace .popUpForm div.idnttyWrap div.icon {
  float: left;
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 1px solid #666;
}
div.workplace .popUpForm div.idnttyWrap div.name {
  float: left;
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-size: 0.8em;
}
div.workplace .popUpForm h4 {
  text-align: center;
  margin: 10px 0;
}
div.workplace .popUpForm div.tempWrap {
  float: left;
  width: 99.5%;
  margin-bottom: 2%;
}
.tempWrap input[type="checkbox"] {
  display: none;
}
.tempWrap input[type="checkbox"]:checked + .box {
  outline: 1px solid #007e90;
  background-color: rgba(24, 157, 209, 0.1);
}
.tempWrap input[type="checkbox"]:checked + .box span {
  -webkit-transform: translateY(70px);
  -ms-transform: translateY(70px);
  transform: translateY(70px);
}
div.workplace .popUpForm div.tempWrap .box {
  float: left;
  width: 100%;
  margin-bottom: 1%;
  outline: 1px solid #ccc;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace .popUpForm div.tempWrap .column {
  float: left;
  height: 36px;
  line-height: 36px;
  padding: 0 15px;
  border-right: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace .popUpForm div.tempWrap .column.tick::after {
  content: "\f00d";
  font-family: FontAwesome;
  color: #ddd;
}
.tempWrap input[type="checkbox"]:checked + .box .column.tick::after {
  content: "\f00c";
  color: #0ed60e;
}
div.workplace .popUpForm div.tempWrap .column.tick {
  width: 8.5%;
}
div.workplace .popUpForm div.tempWrap .column.label {
  width: 70%;
}
div.workplace .popUpForm div.tempWrap .column.num {
  width: 20%;
  border-right: none;
}
.popupBody input.inputText,
.popupBody select,
.popupBody textarea {
  float: left;
  height: 28px;
  padding-left: 8px;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.popupBody input[type="checkbox"] {
  float: left;
  margin: 9px 8px 0 2px;
  -webkit-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}
.popupBody input[type="checkbox"].second {
  margin-left: 10px;
}
.popupBody input[type="checkbox"] + span {
  float: left;
  line-height: 29px;
  font-size: 0.85em;
  cursor: pointer;
}
.popupBody button.btnAdd {
  float: left;
  margin-left: 30%;
  padding: 8px 24px;
}
.popupBody button.btnAdd.no-left {
  margin-left: 0;
  padding: 7px 25px;
}
.popupBody button.btnAdd.right {
  float: right;
  padding: 1.7% 6.7%;
}
.popupBody textarea {
  padding: 8px;
  height: auto;
  line-height: 18px;
  font-family: leelawadee;
  font-size: 0.85em;
}
div.workplace .popUpForm .backdrop {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: 0.3s opacity ease-in-out;
  -o-transition: 0.3s opacity ease-in-out;
  transition: 0.3s opacity ease-in-out;
}
div.workplace .popUpForm .tab-buttons {
  float: left;
  width: 100%;
  padding: 10px 0 0;
}
div.workplace .popUpForm .tab-buttons button.btnAdd {
  float: right;
  margin-left: 0;
  padding: 7px 23px;
}
/* -- show list items -- */
div.workplace div.showRecord div.details.long {
  margin-top: 2%;
  border: none;
}
div.workplace div.showRecord div#header {
  float: left;
  width: 97%;
  padding: 0 1.5% 1%;
  /*font-family: raspoutine;*/
  color: #333;
  font-size: 0.95em;
  font-weight: bold;
  letter-spacing: 0.3px;
}
div.workplace .theForm div#header.title,
div.workplace div.showRecord div#header.title {
  float: left;
  width: 64%;
  padding-left: 25%;
  font-family: leelawadee;
  color: #333333;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin-bottom: 2%;
  text-transform: capitalize;
}
div.workplace .theForm div#header.title.report,
div.workplace div.showRecord div#header.title.report {
  width: 100%;
  padding: 0;
  text-align: center;
}
div.workplace .theForm div#header.title.report #print,
div.workplace div.showRecord div#header.title.report #print {
  float: right;
  font-size: 0.75em;
  text-decoration: none;
}
div.workplace .theForm div#header.title.report #print:before,
div.workplace div.showRecord div#header.title.report #print:before {
  position: relative;
  left: -7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f02f";
}
div.workplace div.showRecord div#header span {
  font-weight: 500;
}
div.workplace div.theForm .addnew,
div.workplace div.showRecord a.addnew,
div.workplace div.showRecord label.addnew,
div.workplace div.showRecord label.editOld,
div.workplace div.showRecord label.edit,
div.workplace div.theForm label.edit,
div.workplace div.theForm label.remove,
div.workplace div.showRecord label.remove {
  position: relative;
  left: 45px;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  color: #015958;
  cursor: pointer;
  z-index: 300;
}
div.workplace div.showRecord a.addnew.second,
div.workplace div.showRecord label.addnew.second,
div.workplace div.showRecord label.editOld.second,
div.workplace div.showRecord label.edit.second,
div.workplace div.showRecord label.remove.second {
  margin-left: 15px;
}
div.workplace div.showRecord a.addnew:before,
div.workplace div.showRecord label.addnew:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f067";
}
div.workplace div.showRecord label.editOld:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f044";
}
div.workplace div.showRecord label.showInfo,
div.workplace div.theForm label.showInfo {
  position: relative;
  left: 10%;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  color: #057e7c;
  cursor: pointer;
  z-index: 300;
}
div.workplace div.showRecord label.showInfo:before,
div.workplace div.theForm label.showInfo:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f06e";
}
div.workplace div.showRecord label.prepareItems4Extra,
div.workplace div.showRecord label.adjustExtra {
  position: relative;
  left: 10px;
  margin-left: 7%;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  color: #057e7c;
  cursor: pointer;
  z-index: 300;
}
div.workplace div.showRecord label.prepareItems4Extra:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f00C";
}
div.workplace div.showRecord label.adjustExtra:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f039";
}
div.workplace div.showRecord label.ship {
  position: relative;
  left: 10px;
  margin-left: 5%;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  color: #057e7c;
  cursor: pointer;
  z-index: 300;
}
div.workplace div.showRecord label.ship:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f1b3";
}
div.workplace div.showRecord label.delivery {
  position: relative;
  left: 10px;
  margin-left: 5%;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  color: #057e7c;
  cursor: pointer;
  z-index: 300;
}
div.workplace div.showRecord label.delivery:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f0d1";
}
div.workplace div.theForm label.edit,
div.workplace div.showRecord label.edit {
  left: 5px;
}
div.workplace div.theForm label.edit:before,
div.workplace div.showRecord label.edit:before {
  position: relative;
  top: 0.5px;
  left: -5px;
  padding-left: 0;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f044";
}
div.workplace div.theForm label.remove:before,
div.workplace div.showRecord label.remove:before {
  position: relative;
  top: 0.5px;
  left: -7px;
  padding-left: 7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f014";
}
div.workplace div.showRecord label.edit.inline:before {
  font-size: 1.2em;
}
div.workplace div.showRecord label.remove.inline:before {
  left: -30px;
  font-size: 1.2em;
}
div.workplace div.theForm label.edit,
div.workplace div.theForm label.remove {
  margin: 0 !important;
  padding: 0 !important;
  left: 10px;
  font-size: 1.2em;
}
div.workplace div.showRecord div#header a.print {
  position: relative;
  margin-left: 80px;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
div.workplace div.showRecord div#header a.print:before {
  position: relative;
  left: -7px;
  font-family: FontAwesome;
  font-size: 1em;
  content: "\f02f";
}
div.workplace div.showRecord div.details.long div.listItems {
  float: left;
  width: 100%;
  font-size: 0.9em;
  border: 1px dotted #999;
  margin-bottom: 12px;
}
div.workplace div.showRecord div.details.long div.listItems.second {
  border-top: none;
}
div.workplace div.showRecord div.details.long div.listItems div.listItem {
  float: left;
  width: 100%;
  border-bottom: 1px dotted #999;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.listItem:last-child {
  border-bottom: none;
}
div.workplace div.showRecord div.details.long header,
div.workplace div.showRecord div.details.long div.listItems .record {
  float: left;
  width: 100%;
  padding: 0 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.showRecord div.details.long div.listItems header {
  font-weight: 600;
}
div.workplace div.showRecord div.details.long div.listItems .record {
  color: #666666;
  border-top: 1px dotted #bbb;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  .record:first-child {
  border-top: none;
}
div.workplace div.showRecord div.details.long div.listItems p#notFound,
div.workplace div.showRecord div.column.medium fieldset p#notFound {
  float: left;
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding-left: 15px;
  font-size: 1em;
  color: #555;
  font-style: italic;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* -- boxes -- */
div.workplace div.showRecord div.details.long div.listItems div.box {
  position: relative;
  float: left;
  width: 11%;
  padding-left: 1%;
  height: 28px;
  line-height: 28px;
  border-left: 1px dotted #bbb;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}
div.workplace div.showRecord div.details.long div.listItems div.box.auto {
  height: auto;
  line-height: 22px;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: normal;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box:nth-child(1) {
  border-left: none;
}
div.workplace div.showRecord div.details.long div.listItems div.box.first {
  width: 4.5%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.tiny {
  width: 5%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.vshort {
  width: 8%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.vshorter {
  width: 6%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.short {
  width: 10%;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box.vshort.icons {
  width: 10%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.vmiddle {
  width: 15%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.middle {
  width: 18%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xmiddle {
  width: 28%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.vxmiddle {
  width: 29.8%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xlmiddle {
  width: 32%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xxmiddle {
  width: 35%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.long {
  width: 40%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.vxlong {
  width: 43%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xlong {
  width: 45%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xxlong {
  width: 50%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xxxlong {
  width: 60%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.jumbo {
  width: 70%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.xjumbo {
  width: 80%;
}
div.workplace div.showRecord div.details.long div.listItems div.box.fjumbo {
  width: 93%;
}
div.workplace div.showRecord div.details.long div.listItems div.box p {
  float: left;
  width: 100%;
  margin-top: 2px;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box
  p
  label.left {
  float: left;
  width: 30%;
  font-weight: 600;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box
  p
  span.right {
  float: right;
  width: 65%;
}
div.workplace div.showRecord div.details.long div.listItems div.box ul,
div.workplace div.showRecord div.details.long div.listItems div.box ol {
  margin-left: 15px;
}
div.workplace div.showRecord div.details.long div.listItems div.box p.header {
  color: #555;
  font-weight: 600;
}
div.workplace div.showRecord div.listItems a#return {
  float: left;
  padding-left: 20px;
  color: #b96125;
  text-decoration: none;
  cursor: pointer;
  background: url(../images/system/b_undo.png) no-repeat;
}
div.workplace div.showRecord div.listItems label.listIcon {
  color: #1f6d03;
  cursor: pointer;
  float: right;
  margin-right: 5%;
  margin-top: 5%;
  text-align: center;
}
div.workplace div.showRecord div.listItems a#returnItems,
div.workplace div.showRecord div.listItems label#returnItems {
  float: left;
  padding-left: 2px;
  color: #015958;
  text-decoration: none;
  cursor: pointer;
}
div.workplace div.showRecord div.listItems a#returnItems.all:before,
div.workplace div.showRecord div.listItems label#returnItems.all:before {
  content: "\f122";
  font-family: FontAwesome;
  padding-right: 5px;
  font-size: 1.1em;
}
div.workplace div.showRecord div.listItems a#returnItems.part:before,
div.workplace div.showRecord div.listItems label#returnItems.part:before {
  content: "\f112";
  font-family: FontAwesome;
  padding-right: 5px;
  font-size: 1.1em;
}
div.workplace div.showRecord div.details a#deliver::before {
  font-family: FontAwesome;
  content: "\f0d1";
  font-size: 1.2em;
  padding-right: 5%;
}
div.workplace div.showRecord div.details a#deliverAll::before {
  font-family: FontAwesome;
  content: "\f0d1";
  font-size: 1em;
  padding-right: 1%;
  padding-left: 1%;
}
div.workplace div.showRecord div.details a#deliverAll {
  position: relative;
  left: 45px;
  font-style: normal;
  text-decoration: none;
  font-weight: 500;
  color: #057e7c;
  cursor: pointer;
  z-index: 300;
}

div.workplace div.showRecord div.details a#deliver {
  color: #b96125;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}
/* -- lacagaha kale ee wareejinta dhulka -- */
div.workplace div.showRecord div.details.long span.require-box {
  position: absolute;
  margin-left: 20px;
  min-width: 30px;
  height: 27px;
  line-height: 26px;
  padding: 0 20px 0 10px;
  border-left: 1px dotted #999;
  border-right: 1px dotted #999;
}
div.workplace div.showRecord div.details.long span.require-box::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f00c";
  color: #4bb966;
}
div.workplace div.showRecord div.details.long span.require-box.off::before {
  content: "\f00d";
  color: #db0101;
}
div.workplace div.showRecord div.details.long span.require-box::after {
  position: absolute;
  margin-left: 18px;
  content: "ON";
  font-size: 0.9em;
}
div.workplace div.showRecord div.details.long span.require-box.off::after {
  content: "OFF";
}
/* -- notary parts -- */
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box.client::before {
  font-family: FontAwesome;
  content: "\f007";
  color: #0c6ded;
  font-size: 1.05em;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box.rpsrtve::before {
  font-family: FontAwesome;
  content: "\f214";
  color: #1f9b38;
  font-weight: bold;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box.identity::before {
  font-family: FontAwesome;
  content: "\f2bc";
  color: #c225cd;
}
div.workplace
  div.showRecord
  div.details.long
  div.listItems
  div.box.finance::before {
  font-family: FontAwesome;
  content: "\f155";
  color: #e71818;
}
/* -- notary qodobada rahanta -- */
div.workplace div.showRecord div.details.long div.listItems div.twoCol {
  float: left;
  width: 50.5%;
  padding: 1% 1.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.showRecord div.details.long div.listItems div.twoCol.right {
  width: 49.5%;
  border-left: 1px dotted #bbb;
}
div.workplace div.showRecord div.details.long div.listItems div.twoCol.second {
  padding: 0 1.5% 1%;
}
div.workplace div.showRecord div.details.long div.listItems div.twoCol p {
  float: left;
  width: 100%;
  margin-bottom: 8px;
}
div.workplace div.showRecord div.details.long div.listItems div.twoCol p label {
  float: left;
  width: 27%;
}
div.workplace div.showRecord div.details.long div.listItems div.twoCol p span {
  float: left;
  width: 73%;
}
/* -- notary photos -- */
div.workplace div.showRecord div.details.long div.photosWrap {
  float: left;
  width: 100%;
  border-left: 1px dotted #999;
}
div.workplace div.showRecord div.details.long div.photosWrap div.photo {
  float: left;
  width: 25%;
  padding: 15px 0;
  text-align: center;
  border: 1px dotted #999;
  border-left: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace
  div.showRecord
  div.details.long
  div.photosWrap
  div.photo:nth-child(n + 5) {
  border-top: none;
}
div.workplace div.showRecord div.details.long div.photosWrap div.photo h4 {
  float: left;
  width: 100%;
  font-size: 0.95em;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}
div.workplace div.showRecord div.details.long div.photosWrap div.photo img {
  float: left;
  width: 60%;
  margin: 3% 20% 0;
  border: 1px dotted #999;
  border-bottom: none;
}
div.workplace div.showRecord div.details.long div.photosWrap div.photo .remove {
  float: left;
  width: 60%;
  margin: 0 20%;
  height: 26px;
  line-height: 26px;
  color: #fff;
  background-color: #cd3b11;
  border: 1px solid #b33916;
  cursor: pointer;
}
div.workplace div.showRecord div.details.long div.photosWrap p#notFound {
  float: left;
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding-left: 15px;
  font-size: 0.9em;
  color: #555;
  font-style: italic;
  border: 1px dotted #999;
  border-left: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* -- totals -- */
.popupBody div.totals,
div.workplace div.theForm div.totals,
div.workplace div.showRecord div.totals {
  float: right;
  width: 34%;
  margin: 2% 0;
}
div.workplace div.showRecord div.totals div {
  padding: 8px 0px;
}
div.workplace div.showRecord div.totals div label,
div.workplace div.showRecord div.totals div span  {
width: 50%;
display: inline-block ;
}
.popupBody div.totals.spec {
  width: 100%;
  margin: 0;
}
.popupBody div.totals div,
div.workplace div.theForm div.totals div,
div.workplace div.showRecord div.totals div {
  width: 100%;
  border: 1px dotted #999;
  border-bottom: none;
  background: #e9efff;
}
.popupBody div.totals div:nth-child(odd),
div.workplace div.theForm div.totals div:nth-child(odd),
div.workplace div.showRecord div.totals div:nth-child(odd) {
  background: #dff6f8;
}
.popupBody div.totals div.colorise,
div.workplace div.theForm div.totals div.colorise,
div.workplace div.showRecord div.totals div.colorise {
  background: #cad6f4;
}
.popupBody div.totals div:last-child,
div.workplace div.theForm div.totals div:last-child,
div.workplace div.showRecord div.totals div:last-child {
  border-bottom: 1px dotted #bbb;
}
.popupBody div.totals label,
.popupBody div.totals span,
div.workplace div.theForm div.totals label,
div.workplace div.theForm div.totals span,
div.workplace div.showRecord div.totals label,
div.workplace div.showRecord div.totals span {
  width: 50%;
  padding: 1% 3%;
  font-size: 0.9em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popupBody div.totals label,
div.workplace div.theForm div.totals label,
div.workplace div.showRecord div.totals label {
  border-right: 1px dotted #999;
}
div.tab.popUp.inline div.record {
  padding: 1% !important;
}
div.tab.popUp.inline div.record div.leftPrt {
  font-size: 1em;
}
/* -- show fieldsets -- */
div.workplace div.showRecord div.details.long div.fields {
  float: left;
  width: 100%;
}
div.workplace div.showRecord div.details.long div.fields .field {
  float: left;
  width: 100%;
  padding: 10px 0;
  border: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div.showRecord div.details.long div.fields .field.hundred {
  min-height: 100px;
}
div.workplace div.showRecord div.details.long div.fields .field.hundred-forty {
  min-height: 143px;
}
div.workplace div.showRecord div.details.long div.fields .field.two-hundred12 {
  min-height: 212px;
}
div.workplace div.showRecord div.details.long div.fields .field.two-hundred35 {
  min-height: 235px;
}
div.workplace div.showRecord div.details.long div.fields .field.right {
  float: right;
  border-left: none;
}
div.workplace div.showRecord div.details.long div.fields .field.medium {
  width: 50%;
}
div.workplace div.showRecord div.details.long div.fields .field.xxlsmall {
  width: 49%;
}
div.workplace div.showRecord div.details.long div.fields fieldset legend {
  position: relative;
  margin-left: 20px;
  padding: 0 15px;
  height: 28px;
  line-height: 28px;
  font-size: 0.9em;
  color: #444;
  border: 1px dotted #999;
}
div.workplace div.showRecord div.fields .field p {
  position: relative;
  float: left;
  width: 92%;
  margin: 0 20px;
  height: 23px;
  line-height: 23px;
  font-size: 0.9em;
}
div.workplace div.showRecord div.fields .field.auto p {
  width: 96%;
  height: auto;
}
div.workplace div.showRecord div.fields .field p.half {
  width: 46%;
  margin: 0 0 0 20px;
}
div.workplace div.showRecord div.fields .field p.second {
  margin-left: 38px;
}
div.workplace div.showRecord div.fields .field p span.title {
  float: left;
  width: 27%;
}
div.workplace div.showRecord div.fields .field p span.value {
  float: left;
  width: 73%;
  color: #666;
}
div.workplace div.showRecord div.fields .field p label.button {
  position: absolute;
  right: 0;
  color: #062679;
  padding-left: 5px;
  cursor: pointer;
}
div.workplace div.showRecord div.fields .field p label.button:before {
  position: relative;
  left: -5px;
  font-family: FontAwesome;
  font-size: 1em;
  font-weight: 600;
}
div.workplace div.showRecord div.fields .field p label.button.add:before {
  content: "\f067";
}
div.workplace div.showRecord div.fields .field p label.button.edit:before {
  content: "\f044";
}
div.workplace div.showRecord div.fields .field p label.button.show:before {
  content: "\f06e";
}
div.workplace div.showRecord div.fields .field div.clear {
  float: left;
  width: 92%;
  margin: 1% 4%;
  border-bottom: 1px dotted #999;
}
div.workplace div.showRecord div.fields .field p.notFound {
  font-style: italic;
  color: #888;
  text-align: center;
}
div.workplace div.showRecord div.fields .field label.button.center {
  position: relative;
  left: 20px;
  font-style: normal;
}
/* -- yes/no box-status -- */
div.workplace div.showRecord div.details.long span.box-status {
  float: left;
  min-width: 50px;
  height: 27px;
  line-height: 26px;
}
div.workplace div.showRecord div.details.long span.box-status::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f00c";
  color: #4bb966;
}
div.workplace div.showRecord div.details.long span.box-status.no::before {
  content: "\f00d";
  color: #db0101;
}
div.workplace div.showRecord div.details.long span.box-status::after {
  position: absolute;
  margin-left: 15px;
  content: "Haa";
  font-size: 0.9em;
}
div.workplace div.showRecord div.details.long span.box-status.no::after {
  content: "Maya";
}
div.workplace div.showRecord.button {
  position: absolute;
  right: 10px;
  min-width: 20px;
  height: 27px;
  line-height: 27px;
  cursor: pointer;
}
div.workplace div.showRecord .button.left {
  left: 10px;
}
div.workplace div.showRecord .button.show {
  padding-left: 25px;
}
div.workplace div.showRecord .button.second {
  margin-left: 25px;
}
div.workplace div.showRecord .button.change {
  background: url(../images/system/b_edit.png) left center no-repeat;
}
div.workplace div.showRecord .button.remove,
div.workplace div.showRecord .button.close {
  background: url(../images/system/b_delete.png) left center no-repeat;
}
div.workplace div.showRecord .button.accept {
  background: url(../images/system/b_check.png) center no-repeat;
}
div.workplace div.showRecord .button.accept:hover {
  background-color: #ccc;
}
div.workplace div.showRecord .button.print {
  background: url(../images/system/b_print.png) center no-repeat;
}
/* -- settings -- */
div.workplace div.showRecord a.edit {
  float: right;
  min-width: 16px;
  height: 16px;
  text-decoration: none;
  cursor: pointer;
  background: url(../images/system/b_edit.png) no-repeat;
}
div.workplace div.showRecord a.edit.close {
  background: url(../images/system/b_lock.png) no-repeat;
}

div.workplace div.showRecord a.edit.backup {
  background: url(../images/system/backup.png) no-repeat;
}
div.workplace div.showRecord a.edit.reset {
  background: url(../images/system/b_delete.png) no-repeat;
}
div.workplace div.showRecord a.edit.new_version {
  background: url(../images/system/b_approve.png) no-repeat;
}
div.workplace div.theForm label.addNew.long.view {
  width: 50%;
  background-color: #3a2621;
  border-radius: 4px;
  padding: 0 0 0 3%;
  color: #fff;
}
div.workplace div.theForm label.addNew.long.view:hover {
  background-color: #057e7c;
}
div.workplace div.theForm label.addNew.long.view:before {
  content: "";
  /*font-family: FontAwesome;
	margin-right: 2%;*/
}
/* --- reports --- */
div.workplace div.reportArea {
  float: left;
  width: 92%;
  margin: 1.5% 2% 0;
  padding: 1% 2%;
  font-size: 0.95em;
  background: #fff;
  border-radius: 14px;
}
div.workplace div.reportArea div.rprtType {
  float: left;
  width: 49%;
  margin: 0 1% 1% 0;
}
div.workplace div.reportArea div.clear {
  float: left;
  width: 90%;
  border-bottom: 1px dotted #ccc;
  margin: 0 10% 1% 0;
}
div.workplace div.reportArea div.rprtType input[type="radio"] {
  float: left;
  margin-top: 4px;
  height: auto;
  line-height: normal;
  -ms-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
}
div.workplace div.reportArea div.rprtType input[type="radio"] ~ span {
  float: left;
  margin-left: 8px;
  height: 20px;
  line-height: 20px;
  /*font-family: raspoutine;*/
  font-size: 0.95em;
  cursor: pointer;
}
/* -- */
div.workplace div.reportArea div.clear {
  margin: 2%;
}
div.workplace div.reportArea div#filterCmdPrcess {
  float: left;
  width: 100%;
}
div.workplace div.reportArea div#filterCmdPrcess #filterWrap {
  float: left;
  width: 74%;
  margin-right: 25%;
}
div.workplace div.reportArea button {
  float: left;
  width: 10%;
  margin-left: 11.2%;
  height: 32px;
}
div.workplace div.reportArea label#process {
  float: left;
  width: 20px;
  height: 32px;
  line-height: 32px;
  margin-left: 14px;
  background: url(../images/system/loading.gif) left center no-repeat;
  display: none;
}
div.workplace div.reportArea label.error {
  float: left;
  width: auto;
  margin: 0;
  margin-left: 14px;
  height: 32px;
  line-height: 32px;
  background: url(../images/system/error_s.png) left center no-repeat;
}
div.workplace div.reportArea div#filterWrap div.filter {
  position: relative;
  float: left;
  margin-bottom: 0.8%;
  display: none;
}
div.workplace div.reportArea div#filterCmdPrcess div.filter.byOffice,
div.workplace div.reportArea div#filterCmdPrcess div.filter.byDate {
  display: inline;
}
div.workplace div.reportArea div#filterCmdPrcess #filterWrap div {
  float: left;
  width: 100%;
}
div.workplace div.reportArea div#filterWrap div.filter label {
  float: left;
  width: 15%;
  margin-top: 0.7%;
  font-size: 0.95em;
  color: #555;
}
div.workplace div.reportArea div#filterWrap div.filter input[type="text"],
div.workplace div.reportArea div#filterWrap div.filter input[type="month"],
div.workplace div.reportArea div#filterWrap div.filter select {
  float: left;
  width: 32%;
  height: 30px;
  margin-right: 1.5%;
  padding: 0 0 0 1%;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
div.workplace div.reportArea div#filterWrap div.filter select {
  width: 33.2%;
  margin-right: 1.6%;
  height: 32px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #fff
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=")
    96% center no-repeat;
}
div.workplace div.reportArea div#filterWrap div.filter input.short,
div.workplace div.reportArea div#filterWrap div.filter select.short {
  width: 20%;
}
div.workplace div.reportArea div#filterWrap div.filter input[type="text"].long {
  width: 66.8%;
}
div.workplace div.reportArea div#filterWrap div.filter input.highlight,
div.workplace div.reportArea div#filterWrap div.filter select.highlight {
  border: 1px solid #f00;
}
div.workplace div.reportArea div#filterWrap div.filter input[type="text"]:focus,
div.workplace
  div.reportArea
  div#filterWrap
  div.filter
  input[type="month"]:focus,
div.workplace div.reportArea div#filterWrap div.filter select:focus {
  outline: none;
  background-color: #eefaeb;
  border: 1px solid #aaa;
}
div.workplace div.reportArea div.suggest {
  position: absolute;
  width: 68% !important;
  left: 15%;
  margin-top: 32px;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  z-index: 100;
}
/* -- report show -- */
div.workplace div#loadPage.report #dynamicQnd {
  width: 95%;
  margin: 0.5% 0;
  padding: 2% 2.5%;
}
div.workplace div#loadPage.report div#dynamicQnd h3.title,
div.workplace div#loadPage.report div#dynamicQnd h5.dates {
  float: left;
  width: 100%;
  /*font-family: raspoutine;*/
  font-size: 1.15em;
  letter-spacing: 0.5px;
  text-align: center;
}
div.workplace div#loadPage.report div#dynamicQnd h5.dates {
  margin-top: 7px;
  font-size: 0.95em;
  font-weight: normal;
}
div.workplace div#loadPage.report div#dynamicQnd h5.dates.second {
  margin-bottom: 7px;
}
div.workplace div#loadPage.report #dynamicQnd #foundNum {
  width: 74%;
  margin: 0;
  margin-top: 15px;
  padding: 0 1%;
  height: 30px;
  line-height: 30px;
  font-size: 0.9em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report #buttons {
  float: left;
  width: 26%;
  margin-top: 15px;
  height: 30px;
}
div.workplace div#loadPage.report a#back {
  float: right;
  padding: 0 30px;
  font-size: 0.85em;
  height: 29px;
  line-height: 29px;
  /*font-family: raspoutine;*/
  color: #666;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 1px 0px 0px #fff;
  box-shadow: inset 0px 1px 0px 0px #fff;
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
  background-color: #ededed;
  border: 1px solid #dcdcdc;
}
div.workplace div#loadPage.report #post,
div.workplace div#loadPage.report a#print {
  float: left;
  margin-left: 3%;
  padding-left: 5%;
  height: 29px;
  line-height: 29px;
  font-size: 0.9em;
  color: #665132;
  cursor: pointer;
  text-decoration: none;
}
div.workplace div#loadPage.report a#print::before {
  position: relative;
  left: -15%;
  font-family: FontAwesome;
  content: "\f02f";
  font-size: 1.1em;
}
div.workplace div#loadPage.report #post::before {
  position: relative;
  left: -15%;
  font-family: FontAwesome;
  content: "\f1d8";
  font-size: 1.1em;
}
div.workplace div#loadPage.report #dynamicQnd ul.print-list {
  position: relative;
  display: none;
  width: 50%;
  float: left;
  margin-left: -25%;
  margin-top: -18.5%;
  left: 0;
  background: #057e7c;
  border-radius: 4px;
  list-style-type: none;
}
div.workplace div#loadPage.report #dynamicQnd div.arrow-down {
  display: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #057e7c;
  margin-left: 20%;
}
div.workplace div#loadPage.report #dynamicQnd ul.print-list > li {
  width: 100%;
  float: left;
  border-bottom: 1px dotted #3a2621;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 5%;
}
div.workplace
  div#loadPage.report
  #dynamicQnd
  ul.print-list
  > li:nth-child(even) {
  border-bottom: none;
}
div.workplace div#loadPage.report #dynamicQnd ul.print-list > li a {
  width: 75%;
  font-size: 0.9em;
  color: #fff;
  display: block;
  padding: 0 7%;
  text-decoration: none;
}
div.workplace div#loadPage.report #dynamicQnd ul.print-list > li a:hover {
  color: #3a2621 !important;
}
div.workplace div#loadPage.report #dynamicQnd ul.print-list > li a.pdf:before {
  content: "\f1c1";
}
div.workplace
  div#loadPage.report
  #dynamicQnd
  ul.print-list
  > li
  a.excell:before {
  content: "\f1c3";
}
div.workplace div#loadPage.report #dynamicQnd #dataTable {
  margin: 1% 0;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan {
  float: right;
  width: 42.9%;
  margin-top: 1.5%;
  margin-right: -0.2%;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan.middle {
  width: 31.8%;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan #header,
div.workplace div#loadPage.report #dynamicQnd .lastDiwan .record {
  float: left;
  width: 100%;
  border: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan #header {
  color: #333;
  background: #d8d8d8;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan .record {
  border-top: none;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan div.total {
  float: left;
  margin: 0 0 0 2%;
  width: auto;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  font-size: 0.85em;
  overflow: hidden;
  border-left: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan div.total:first-child {
  margin: 0;
  border-left: none;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan div.total.middle {
  width: 45%;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan div.total.small {
  width: 32%;
}
div.workplace div#loadPage.report #dynamicQnd .lastDiwan.spec div.total.small {
  width: 23%;
}
/* -- income statement -- */
div.workplace div#loadPage.report div#incomeDsgn {
  position: relative;
  float: left;
  width: 90%;
  min-height: 400px;
  margin: 1% 3%;
  font-size: 0.95em;
}
div.workplace div#loadPage.report div#incomeDsgn div#header {
  float: left;
  width: 100%;
}
div.workplace div#loadPage.report div#incomeDsgn div#header h3,
div.workplace div#loadPage.report div#incomeDsgn div#header h4,
div.workplace div#loadPage.report div#incomeDsgn div#header h5 {
  float: left;
  width: 90%;
  margin: 0 5% 1%;
  text-align: center;
}
div.workplace div#loadPage.report div#incomeDsgn div#buttons {
  position: absolute;
  right: 45px;
  top: 30px;
  width: 25%;
}
div.workplace div#loadPage.report div#incomeDsgn div#header h3 {
  font-size: 1.2em;
}
div.workplace div#loadPage.report div#incomeDsgn div#header h4 {
  font-size: 1.1em;
}
div.workplace div#loadPage.report div#incomeDsgn div#header h5 {
  font-size: 1em;
  font-weight: normal;
}
div.workplace div#loadPage.report div#incomeDsgn div#header h5.last {
  padding: 0 0 2.5%;
  border-bottom: 1px dotted #999;
}
/* --- */
div.workplace div#loadPage.report div#incomeDsgn div#details {
  float: left;
  width: 86%;
  margin: 0 5%;
  padding: 1% 2% 2%;
  background: #f6f6f6;
}
div.workplace div#loadPage.report div#incomeDsgn div#details label.income {
  float: left;
  width: 100%;
  margin: 2% 0 1%;
  font-size: 0.95em;
  text-trans: uppercase;
  font-weight: bold;
}
div.workplace div#loadPage.report div#incomeDsgn div#details label.second {
  margin: 4% 0 1%;
}
div.workplace div#loadPage.report div#incomeDsgn div#oneRec {
  float: left;
  width: 100%;
  padding: 0.4% 0;
  font-size: 0.95em;
}
div.workplace div#loadPage.report div#incomeDsgn div#oneRec span.left {
  float: left;
  width: 55%;
  margin-left: 2%;
}
div.workplace div#loadPage.report div#incomeDsgn div#oneRec span.right {
  float: right;
  width: 40%;
  text-align: right;
}
div.workplace div#loadPage.report div#incomeDsgn div#oneRec span.total {
  float: left;
  width: 55%;
  margin-left: 4%;
  padding: 0.5% 0;
}
div.workplace div#loadPage.report div#incomeDsgn div#oneRec span.right.totals {
  width: auto;
  min-width: 7%;
  padding: 0.5% 0;
  font-weight: bold;
  border-top: 1px solid #666;
  border-bottom: 2px solid #666;
}
div.workplace div#loadPage.report div#incomeDsgn div#details label.netIncome {
  float: left;
  width: 49%;
  margin: 5% 0 0;
}
div.workplace
  div#loadPage.report
  div#incomeDsgn
  div#details
  label.netIncome.bdx {
  float: right;
  width: 20%;
  margin: 5% 0 0;
  padding: 0 0 0.4%;
  text-align: right;
  border-bottom: 1px solid #666;
}
div.workplace
  div#loadPage.report
  div#incomeDsgn
  div#details
  label.netIncome.border {
  float: right;
  width: 20%;
  margin: 0.2% 0 0 90%;
  border-top: 2px solid #666;
} /* -- balance sheet -- */
div.workplace div#loadPage.report a#back.balanceSheet {
  margin-right: 3%;
}
div.workplace div#loadPage.report a#print.balanceSheet {
  float: left;
  margin-left: 75%;
  padding-left: 5%;
  height: 29px;
  line-height: 29px;
  font-size: 0.9em;
  color: #665132;
  cursor: pointer;
  text-decoration: none;
}
div.workplace div#loadPage.report div#incomeDsgn div#details {
  float: left;
  width: 86%;
  margin: 0 5%;
  padding: 1% 2% 2%;
  background: #f6f6f6;
}
div.workplace div#loadPage.report div.part {
  float: left;
  width: 50%;
  padding-bottom: 2%;
  min-height: 280px;
  border-top: 1px dotted #999;
  border-right: 1px dotted #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report div.part.asset {
  /*background: #f00;*/
}
div.workplace div#loadPage.report div.part.liability {
  border-right: none;
}
div.workplace div#loadPage.report div#incomeDsgn div#details div#clear {
  float: left;
  width: 100%;
}
div.workplace div#loadPage.report div.part.total {
  height: 40px;
  line-height: 40px;
  min-height: 1px;
  padding-left: 3%;
  padding-bottom: 0;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px dotted #999;
}
div.workplace div#loadPage.report div.part header {
  float: left;
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #fff;
  font-size: 1.05em;
  text-align: center;
  background: #666;
}
div.workplace div#loadPage.report div.part div.title {
  float: left;
  width: 97%;
  margin: 2% 0 1.5%;
  padding-left: 3%;
}
div.workplace div#loadPage.report div.part div.sheet {
  float: left;
  width: 94%;
  margin: 0 0 1% 6%;
  font-size: 0.9em;
  line-height: 19px;
}
div.workplace div#loadPage.report div.part div.sheet.second {
  margin: 1% 0 1% 6%;
}
div.workplace div#loadPage.report div.part div#innerSheet {
  float: left;
  width: 96%;
  padding-left: 4%;
}
div.workplace div#loadPage.report div.part div.sheet label {
  float: left;
  width: 97%;
  /*background: #f00;*/
}
div.workplace div#loadPage.report div.part div.sheet label.record {
  /*background: #0f0;*/
}
div.workplace div#loadPage.report div.part div.sheet span {
  float: right;
}
div.workplace div#loadPage.report div.part div.sheet span.total {
  min-width: 50px;
  font-weight: 600;
  text-align: right;
  border-top: 1px solid #999999;
}
div.workplace div#loadPage.report div.blnceSheet {
  float: left;
  width: 94%;
  margin: 2% 3%;
  font-size: 0.95em;
  border: 1px solid #ccc;
}
div.workplace div#loadPage.report div.blnceSheet .column {
  position: relative;
  float: left;
  width: 50%;
  min-height: 650px;
  padding-bottom: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report div.blnceSheet .column.right {
  border-left: 1px solid #ccc;
}
div.workplace div#loadPage.report div.blnceSheet .column.footer {
  padding: 0 15px;
  min-height: 10px;
  height: 32px;
  line-height: 32px;
  /*font-family: raspoutine;*/
  font-weight: 600;
  border-top: 1px solid #ccc;
}
div.workplace div#loadPage.report div.blnceSheet .clear {
  float: left;
  width: 100%;
}
div.workplace div#loadPage.report div.blnceSheet .header,
div.workplace div#loadPage.report div.blnceSheet .details {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report div.blnceSheet .header {
  height: 32px;
  line-height: 32px;
  /*font-family: raspoutine;*/
}
div.workplace div#loadPage.report div.blnceSheet .header {
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
}
div.workplace div#loadPage.report div.blnceSheet .details {
  padding: 10px 15px;
  font-size: 0.9em;
}
div.workplace div#loadPage.report div.blnceSheet .line {
  position: relative;
  float: left;
  width: 100%;
  height: 18px;
  padding-left: 25px;
  margin-bottom: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div.workplace div#loadPage.report div.blnceSheet .line.sub-title {
  padding-left: 15px;
}
div.workplace div#loadPage.report div.blnceSheet .line.title {
  padding-left: 0;
  font-weight: 600;
}
div.workplace div#loadPage.report div.blnceSheet .line.second {
  margin-top: 15px;
}
div.workplace div#loadPage.report div.blnceSheet span.total {
  position: absolute;
  right: 0;
}
div.workplace div#loadPage.report div.blnceSheet span.total.grand {
  right: 15px;
  /*font-weight: 600;*/
}
div.workplace div#loadPage.report div.blnceSheet span.total.bold {
  font-weight: 600;
  padding-bottom: 1px;
  border-bottom: 1px solid #333;
}

div.workplace div.report-record {
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*-------------------------------------------------------------------
| register pages
--------------------------------------------------------------------*/
.register-wrap {
  position: relative;
  width: 100%;
  min-height: 640px;
  font-family: leelawadee;
}
.register-wrap div.topBar {
  float: left;
  width: 100%;
  min-height: 56px;
  line-height: 56px;
  color: #fff;
  background: #8b8b8b;
}
.register-wrap div.topBar #logoWrap {
  float: left;
  width: 18%;
  height: 56px;
  text-align: center;
  background: #143ca5;
}
.register-wrap div.topBar #logoWrap img {
  margin: 11px 0 0;
  width: 120px;
}
.register-wrap div.topBar #programName {
  float: left;
  width: 60%;
  margin-left: 2%;
  font-size: 1.1em;
}
.register-wrap div.topBar #programName > span {
  position: relative;
  left: 15px;
  /*font-family: raspoutine;*/
  letter-spacing: 0.5px;
}
.register-wrap div.topBar .topIcons {
  position: relative;
  float: right;
  width: 16%;
  height: 56px;
  padding-right: 2%;
  text-align: right;
}
.register-wrap div.topBar div.icon {
  position: relative;
  top: 5px;
  width: 42px;
  height: 42px;
  display: inline-block;
}
.register-wrap div.topBar div.icon.profile > img {
  float: left;
  width: 100%;
  height: 100%;
  margin: 0;
  background-size: cover;
  background-position: center center;
  border-radius: 99em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}
.register-wrap div.topBar div.dropDown {
  position: absolute;
  left: -40%;
  width: 130%;
  top: 56px;
  text-align: left;
  color: #333;
  background: #fff;
  border: 1px solid rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
.register-wrap div.topBar div.dropDown:after,
.register-wrap div.topBar div.dropDown:before {
  content: "";
  display: block;
  position: absolute;
  right: 4.5%;
  width: 0;
  height: 0;
  border-style: solid;
}
.register-wrap div.topBar div.dropDown:after {
  top: -22px;
  border-color: transparent transparent #dcdcdc transparent;
  border-width: 11px;
}
.register-wrap div.topBar div.dropDown:before {
  top: -22px;
  border-color: transparent transparent #dcdcdc transparent;
  border-width: 11px;
}
.register-wrap div.topBar div.dropDown div.row {
  float: left;
  width: 90%;
  height: auto;
  line-height: normal;
  padding: 3% 5%;
  font-size: 0.9em;
  border-bottom: 1px solid #aaa;
}
.register-wrap div.topBar div.dropDown div.row:last-child {
  border-bottom: none;
}
.register-wrap div.topBar div.dropDown div.row.bar {
  background: #dcdcdc;
  /*font-family: raspoutine;*/
  font-size: 0.95em;
}
.register-wrap div.topBar div.dropDown div.row #photo {
  float: left;
  width: 25%;
  position: relative;
}
.register-wrap div.topBar div.dropDown div.row #links {
  float: right;
  width: 70%;
  margin-top: 2%;
}
.register-wrap div.topBar div.dropDown #photo img {
  float: left;
  width: 100%;
  height: 100%;
  border-radius: 99em;
  border: 1px solid #999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap div.topBar div.dropDown .overlay {
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  text-align: center;
  overflow: hidden;
  border-radius: 99em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap div.topBar div.dropDown div.row #photo:hover .overlay {
  height: 100%;
  background: #3055b5;
  cursor: pointer;
}
.register-wrap div.topBar div.dropDown .overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1em;
  line-height: 20px;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.register-wrap div.topBar div.dropDown div.row #links p {
  float: left;
  width: 100%;
  font-size: 0.9em;
  margin-bottom: 1%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.register-wrap div.topBar div.dropDown div.row #links p#name {
  font-weight: 600;
  font-size: 0.95em;
}
.register-wrap div.topBar div.dropDown div.row #links p#user {
  color: #666;
}
.register-wrap div.topBar div.dropDown div.row.button {
  padding: 3% 5%;
  background: #efefef;
}
.register-wrap div.topBar div.dropDown div.row.button a {
  float: left;
  width: 50%;
  margin-top: 2%;
}
.register-wrap div.topBar div.dropDown div.row.button a.logout {
  float: right;
  width: 35%;
  margin: 0;
  padding: 2% 0;
  text-align: center;
  color: #666;
  font-size: 0.9em;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dcdcdc;
}
.register-wrap div.topBar div.dropDown div.row.button a i.fa {
  position: relative;
  top: 1.5px;
}
.register-wrap div.topBar div.dropDown div.row.button a span {
  position: relative;
  left: 8px;
  font-size: 0.9em;
}
/* -- */
.register-wrap div.topMenu {
  float: left;
  width: 100%;
  height: 38px;
  background: #4be4e4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap div.topMenu span.menu {
  float: left;
  width: 15.95%;
  line-height: 38px;
  text-align: right;
  padding-right: 2%;
  /*font-family: raspoutine;*/
  color: #666;
  border-right: 1px dotted #666;
}
.register-wrap div.topMenu ul {
  position: relative;
  height: 38px;
  list-style: none;
}
.register-wrap div.topMenu > ul > li {
  float: left;
  min-width: auto;
  height: 38px;
  line-height: 38px;
  border-right: 1px dotted #666;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap div.topMenu > ul > li a {
  font-size: 0.9em;
  color: #143ca5;
  display: block;
  padding: 0 25px;
  text-decoration: none;
}
.register-wrap div.topMenu > ul > li a span {
  position: relative;
  margin-left: 10px;
  padding: 3px 5px;
  font-size: 0.9em;
  background-color: #eee;
  color: #333;
}
.register-wrap div.topMenu > ul > li a span.red {
  background-color: #f00;
  color: #fff;
}
.register-wrap div.topMenu ul li:hover,
.register-wrap div.topMenu ul li.active {
  background: rgba(0, 0, 0, 0.1);
}
/* --- */
.register-wrap div.unknown {
  min-height: 260px;
  background: #fff url(../images/system/oops.png) 94% 20px no-repeat;
  background-size: 140px;
}
.register-wrap div.unknown h3 {
  margin-top: 1.5%;
  font-size: 2em;
}
.register-wrap div.unknown p,
.register-wrap div.unknown ul li {
  line-height: 25px;
  font-size: 1em;
}
/* --- */
.register-wrap #dynamicQnd {
  float: left;
  width: 96%;
  margin: 2%;
  padding: 1% 2%;
  border: 1px dotted #999;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap #dynamicQnd #foundNum {
  float: left;
  width: 62.7%;
  margin: 0 0 1%;
  padding: 0.8% 1%;
  background: #edfeee;
  border: 1px dotted #49f552;
}
.register-wrap #dynamicQnd #dataTable {
  position: relative;
  float: left;
  width: 99.8%;
  margin: 0 0 2%;
  min-height: 300px;
  border-top: 1px dotted #999;
}
.register-wrap #dynamicQnd div#loading {
  float: left;
  width: 100%;
  margin: 1% 0 0;
  text-align: center;
  height: 20px;
  display: none;
}
.register-wrap #dynamicQnd div#loading::before {
  content: "soo kacaya";
  color: #555;
  font-style: italic;
}
.register-wrap #dynamicQnd div#loading::after {
  content: url(../images/system/loading.gif);
  padding-left: 1%;
}
.register-wrap p#noRecords {
  float: left;
  width: 100%;
  margin: 2% 0;
  font-size: 0.9em;
  text-align: center;
  color: #666;
}
.register-wrap div.record {
  float: left;
  width: 100%;
  border: 1px dotted #999;
  border-top: none;
}
.register-wrap #dynamicQnd #dataTable div.record:nth-child(even) {
  background: #f3f3f3;
}
.register-wrap #dynamicQnd #dataTable div.record.header {
  color: #333;
  background: #cdcdcd;
}
.register-wrap #dynamicQnd #dataTable div.record.suspended:after {
  position: absolute;
  right: -2px;
  content: "";
  width: 7px;
  height: 32px;
  background-color: #ff8000;
}
.register-wrap #dynamicQnd #dataTable div.cave {
  position: relative;
  float: left;
  width: auto;
  height: 36px;
  line-height: 36px;
  margin-left: 1%;
  padding-left: 1%;
  border-left: 1px dotted #999;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.register-wrap #dynamicQnd #dataTable #record.header div.cave {
  height: 38px;
  line-height: 38px;
}
.register-wrap #dynamicQnd #dataTable #record.header div.cave {
  border-left: 1px dotted #fff;
}
.register-wrap #dynamicQnd #dataTable div.cave:first-child {
  border-left: none !important;
  margin: 0;
}
.register-wrap #dynamicQnd #dataTable div.cave.button {
  width: 8%;
}
.register-wrap #dynamicQnd #dataTable div.cave.serial {
  width: 4%;
}
.register-wrap #dynamicQnd #dataTable div.cave.short {
  width: 7%;
}
.register-wrap #dynamicQnd #dataTable div.cave.mshort {
  width: 8%;
}
.register-wrap #dynamicQnd #dataTable div.cave.lshort {
  width: 10%;
}
.register-wrap #dynamicQnd #dataTable div.cave.smiddle {
  width: 12%;
}
.register-wrap #dynamicQnd #dataTable div.cave.mmiddle {
  width: 14%;
}
.register-wrap #dynamicQnd #dataTable div.cave.middle {
  width: 16%;
}
.register-wrap #dynamicQnd #dataTable div.cave.xmiddle {
  width: 20%;
}
.register-wrap #dynamicQnd #dataTable div.cave.lmiddle {
  width: 24%;
}
.register-wrap #dynamicQnd #dataTable div.cave.xlmiddle {
  width: 30%;
}
.register-wrap #dynamicQnd #dataTable div.cave.long {
  width: 35%;
}
.register-wrap #dynamicQnd #dataTable div.cave.vlong {
  width: 45%;
}
.register-wrap #dynamicQnd #dataTable div.cave.button a {
  float: left;
  margin-right: 11%;
  width: 16px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.register-wrap #dynamicQnd #dataTable div.cave.button a.showtitle {
  width: auto;
  padding-left: 28px;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.register-wrap #dynamicQnd #dataTable div.cave a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.register-wrap #dynamicQnd #dataTable button a.view {
  background: url(../images/system/b_view.png) left center no-repeat;
  background-size: 22px;
}
.register-wrap #dynamicQnd #dataTable a.update {
  background: url(../images/system/b_edit.png) left center no-repeat;
  background-size: 22px;
}
.register-wrap #dynamicQnd #dataTable .button a.delete {
  background: url(../images/system/b_delete.png) left center no-repeat;
  background-size: 22px;
}

/* --- */
.register-wrap .showRecord {
  float: left;
  width: 96%;
  margin: 1.5% 2%;
}
.register-wrap .showRecord .part {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.register-wrap .showRecord .part header {
  float: left;
  padding: 10px 30px;
  font-size: 1.2em;
  font-weight: 600;
  background-color: #12bde5;
}
.register-wrap .showRecord .part .details {
  float: left;
  width: 100%;
  padding: 20px 30px;
  font-size: 1.05em;
  background: #fff;
  border: 1px dotted #999;
  border-bottom: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap .showRecord .part > .details:last-child {
  border-bottom: 1px dotted #999;
}
.register-wrap .showRecord .part .details .record {
  float: left;
  width: 100%;
  margin-bottom: 15px;
}
.register-wrap .showRecord .part .details .record .column {
  float: left;
  width: 49%;
}
.register-wrap .showRecord .part .details .record .column.right {
  float: right;
}
.register-wrap .showRecord .part .details .record .column.jumbo {
  width: 100%;
}
.register-wrap .showRecord .part .details .record .column.large {
  width: 69%;
}
.register-wrap .showRecord .part .details .record .column.small {
  width: 29%;
}
.register-wrap .showRecord .part .details .column .colLeft {
  float: left;
  width: 28%;
  padding-left: 5px;
  background-color: rgba(140, 140, 140, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.register-wrap .showRecord .part .details .column.jumbo .colLeft {
  width: 13.8%;
}
.register-wrap .showRecord .part .details .column.large .colLeft {
  width: 20%;
}
.register-wrap .showRecord .part .details .column .colRight {
  float: right;
  width: 69%;
  color: #777;
  border-bottom: 1px dotted #999;
}
.register-wrap .showRecord .part .details .column.jumbo .colRight {
  width: 84.8%;
}
.register-wrap .showRecord .part .details .column.large .colRight {
  width: 78%;
}
.register-wrap .showRecord .part .details .colLeft,
.register-wrap .showRecord .part .details .colRight {
  height: 36px;
  line-height: 36px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.register-wrap .showRecord .part .details p.remarks {
  float: left;
  min-height: 60px;
  line-height: 26px;
  color: #777;
}
.register-wrap .showRecord .btn-register {
  float: left;
  width: 30%;
  margin: 1% 33% 5%;
  height: 46px;
  line-height: 46px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #163ea5;
  border: none;
  cursor: pointer;
}
.register-wrap .showRecord .btn-register:hover {
  background: #0a3388;
}

/*closing page style sheet*/
div.closingArea {
  float: left;
  width: 92%;
  margin: 1.5% 2%;
  padding: 1% 2%;
  font-size: 0.95em;
}
div.closingArea div.dynamicCD {
  width: 70%;
  display: block;
  float: left;
}
div.closingArea div.dynamicCD label.account {
  float: left;
  width: 20%;
  /*font-family:raspoutine;*/
  font-size: 0.95em;
  letter-spacing: 0.5px;
  padding: 1%;
  border: 1px dotted #999999;
  height: 15px;
  line-height: 15px;
  overflow: hidden;
}
div.closingArea div.dynamicCD label.account.data {
  float: left;
  width: 50%;
  margin-right: 15%;
  border-left: none;
  border-left: none;
}
div.closingArea div.dynamicCD label.account.second {
  border-top: none;
}
div.closingArea div.dynamicTotal {
  width: 70%;
  display: block;
}
div.closingArea div.dynamicTotal label.account.data {
  float: left;
  width: 50%;
  /*font-family:raspoutine;*/
  font-size: 1.1em;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 1%;
  border: 1px dotted #999999;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  margin-left: 22.2%;
  text-align: right;
  border-top: none;
}

div.workplace div.theForm #btnCloseFn,
div.workplace div.showRecord #btnCloseFn {
  background: rgba(160, 30, 40, 1);
  width: 20%;
  letter-spacing: 3px;
  border: none;
}
div.workplace div.theForm #btnCloseFn:hover,
div.workplace div.showRecord #btnCloseFn:hover {
  background: rgba(226, 8, 8, 1);
  width: 20%;
}
div.workplace div.showRecord #btnCloseFn {
  margin-top: 5%;
}
/*end closing page style sheet*/
/*inventory check page style*/
div.inventory-header {
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  margin: 2% 0;
}
div.inventory-wrap {
  width: 100%;
}
div.inventory-wrap .inventory-check {
  min-width: 5%;
  padding: 0.5%;
  margin: 0.5%;
  background-color: #ddd;
  border-radius: 5px;
  cursor: not-allowed;
  display: inline-block;
  text-align: center;
}
div.inventory-wrap .inventory-check.available {
  background: #3a2621;
  color: #fff;
  cursor: pointer;
}
div.inventory-wrap .inventory-check.active {
  background: #057e7c;
  color: #fff;
}
div.inventory-wrap .inventory-check.available:hover {
  background: #057e7c;
  color: #fff;
}

/**/
div.inventory-data-wrap {
  width: 100%;
  margin: 2% 0 0 0;
}
div.inventory-data-wrap div.inventory-data {
  position: relative;
  width: 15%;
  display: inline-block;
}
div.inventory-data-wrap div.inventory-data img {
  width: 100%;
  border: 1px solid #000;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  height: 20%;
}
div.inventory-data-wrap div.inventory-data .inventory-info-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008cba;
  overflow: hidden;
  width: 100%;
  height: 45%;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
  border-radius: 0 0 4px 4px;
  opacity: 1;
  margin-left: 1px;
  font-size: 0.8em;
}
div.inventory-data-wrap div.inventory-data:hover {
  border-radius: 4px;
}
div.inventory-data-wrap div.inventory-data:hover .inventory-info-text {
  height: 99.5%;
  opacity: 0.9;
}
div.inventory-data-wrap div.inventory-data .inventory-info-text label {
  width: 90%;
  float: left;
  color: #fff;
  margin: 1%;
  font-size: 0.8em;
  font-weight: normal;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.inventory-data-wrap
  div.inventory-data
  .inventory-info-text
  label:nth-child(1) {
  margin-top: 3%;
}
/*div.inventory-data-wrap div.inventory-data .inventory-info-text label {
	color:#FFF;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	text-align: center;

}*/
/* --- Product Card ---- */
#make-3D-space {
  position: relative;
  width: 100%;
  display: block;
  padding: 1%;
}
#product-card {
  width: 11%;
  height: 100%;
  display: inline-block;
  margin: 0.5% 0.3%;
}
#product-front {
  width: 100%;
  height: 100%;
}

#product-front img {
  width: 100%;
  height: 150px;
  border-radius: 4px 4px 0 0;
}
.stats-container {
  background: #fff;
  width: 90%;
  height: auto;
  padding: 5%;
  border-radius: 0 0 4px 4px;
}
.stats-container .product_name {
  width: 100%;
  font-size: 1em;
  color: #393c45;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.stats-container .product_qty {
  width: 100%;
  font-size: 0.95;
  color: #b1b1b3;
  padding: 2px 0 20px 0;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.stats-container .product_price {
  float: right;
  color: #48cfad;
  font-size: 1em;
  font-weight: 600;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/**/
.clinic-dashboard {
  width: 96%;
  background: #fff;
  padding: 2%;
  display: inline-block;
}
.clinic-dashboard header {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 5%;
}
.clinic-dashboard .clinic-dashboard-left {
  width: 70%;
  float: left;
}
.clinic-dashboard .clinic-dashboard-left .dash-clinic-row {
  width: 100%;
  display: block;
  float: left;
  margin-bottom: 5%;
}
.clinic-dashboard .clinic-dashboard-left .dash-clinic-row .dash-clinic-box {
  width: 30%;
  display: block;
  float: left;
  margin-right: 2%;
  padding: 2% 1%;
  background: #fc8986;
  color: #fff;
  border-radius: 4px;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-box
  .clinic-icon {
  width: 10%;
  display: block;
  float: left;
  margin-right: 7%;
  padding: 5%;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 1em;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-box
  .clinic-title {
  font-weight: bold;
  margin-bottom: 2%;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-box
  .clinic-subtitle {
  font-style: italic;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-box:nth-child(2) {
  background: #ffb55c;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-box:nth-child(3) {
  margin-right: 0;
  background: #5db3a8;
}
.clinic-dashboard .clinic-dashboard-left .dash-clinic-row .dash-clinic-charts {
  width: 100%;
  padding: 1%;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-area {
  width: 60%;
  padding: 1%;
  height: 54vh;
  background: #fff;
  float: left;
  border: 1px solid #ccc;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie {
  width: 33%;
  padding: 1%;
  height: 54vh;
  background: #fff;
  float: left;
  border: 1px solid #ccc;
  margin-left: 1%;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  header {
  margin-left: 5%;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  #pieChart {
  margin-top: 5%;
  width: 10%;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  .pie-info {
  float: left;
  width: 50%;
  margin-top: 10%;
  display: block;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  margin-left: 5%;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  .pie-info
  p.expense-acc-text {
  font-weight: normal;
  font-size: 0.95em;
  font-weight: normal;
  padding-left: 10%;
  margin-bottom: 7%;
  border-left: 15px solid #eee;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  .pie-info
  p:nth-child(1) {
  border-color: #036b51;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  .pie-info
  p:nth-child(2) {
  border-color: #08ae85;
}
.clinic-dashboard
  .clinic-dashboard-left
  .dash-clinic-row
  .dash-clinic-charts
  .dash-clinic-pie
  .pie-info
  p:nth-child(3) {
  border-color: #08e5ae;
}
.clinic-dashboard .clinic-dashboard-right {
  width: 29%;
  float: right;
  border: 1px solid #ccc;
  /*padding-left: 2%;*/
  height: 76vh;
}
.clinic-dashboard .clinic-dashboard-profile {
  text-align: center;
  margin: 2%;
}
.clinic-dashboard .clinic-dashboard-profile img {
  border-radius: 50%;
  width: 50%;
  height: 50%;
}
.clinic-dashboard .clinic-dashboard-profile-name {
  font-weight: bold;
  text-align: center;
  margin-top: 5%;
  margin-bottom: 2%;
}
.clinic-dashboard .clinic-dashboard-profile-title {
  color: #bbb;
}
.clinic-dashboard .clinic-dashboard-right .clinic-dashboard-appointment {
  width: 96%;
  float: left;
  margin-top: 1%;
}
.clinic-dashboard .clinic-dashboard-right .clinic-dashboard-appointment header {
  margin-left: 5%;
}
.clinic-dashboard
  .clinic-dashboard-right
  .clinic-dashboard-appointment
  .clinic-dashboard-appointment-box {
  width: 90%;
  float: left;
  padding: 2.5% 5%;
  margin-top: 0%;
  border-bottom: 1px dotted #bbb;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 2%;
}
.clinic-dashboard
  .clinic-dashboard-right
  .clinic-dashboard-appointment
  .clinic-dashboard-appointment-box:hover {
  background: rgba(0, 0, 0, 0.1);
}
.clinic-dashboard
  .clinic-dashboard-right
  .clinic-dashboard-appointment
  .clinic-dashboard-appointment-box:last-child {
  border-bottom: none;
}
.clinic-dashboard
  .clinic-dashboard-right
  .clinic-dashboard-appointment
  .clinic-dashboard-appointment-box
  .appointment-icon {
  width: 15%;
  font-size: 1.5em;
  float: left;
}
.clinic-dashboard
  .clinic-dashboard-right
  .clinic-dashboard-appointment
  .clinic-dashboard-appointment-box
  .appointment-text {
  font-size: 0.75em;
  font-style: italic;
  text-indent: 10px;
  color: #6e6e6e;
}
/*end*/

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/**/
/**/
/**/
.ForlabPopUps .fields {
  float: left;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10px 0px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ForlabPopUps fieldset {
  float: left;
  /*width: 49%;*/
  -ms-flex-preferred-size: 23.8%;
  flex-basis: 23.8%;
  padding: 10px 0;
  background: #efefef;
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin-left: 8px;
}
.ForlabPopUps fieldset.second {
  margin-left: 8px;
}
.ForlabPopUps fieldset:first-child {
  margin-left: 0px;
  /*margin-top: 10px;*/
}
.ForlabPopUps fieldset:nth-child(n + 5) {
  margin-left: 0px;
  margin-top: 10px;
}
.ForlabPopUps fieldset:nth-child(n + 6) {
  margin-left: 8px;
}
.ForlabPopUps fieldset.top {
  margin-top: 10px;
}
.ForlabPopUps legend {
  background: #fff;
  position: relative;
  margin-left: 4%;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  /*font-size: 0.95em;*/
  color: #444444;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.ForlabPopUps legend label span {
  font-size: 1.5em;
}

.ForlabPopUps fieldset .all-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0px 10px;
}
.ForlabPopUps fieldset .all-items .item-hold {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  margin-top: -10px;
}
.ForlabPopUps fieldset .all-items .item-hold:first-child {
  margin-top: 0px;
}
.ForlabPopUps fieldset .all-items .item-hold label {
  cursor: pointer;
  display: inline-block;
  width: 100%;
}
.ForlabPopUps fieldset .all-items .item-hold label span {
  display: inline-block;
  font-size: 0.85em;
}

/*Lab Test*/
.ForlabPopUps .labTest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ForlabPopUps .labTest fieldset {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 10px;
  padding-bottom: 0px;
  margin-bottom: 20px;
}
.ForlabPopUps .labTest fieldset .fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ForlabPopUps .labTest fieldset .fields .field {
  /*flex-basis: 30%;*/
}
/*.field label span {
	display: block;
	width: 80%;
}*/
.field label input.testResultInput {
  display: block;
  margin-left: 25px;
  width: 20%;
  margin-top: -5px;
}
.ForlabPopUps .labTest .rec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}
.ForlabPopUps .labTest .rec label {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.ForlabPopUps .labTest .rec textarea {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  width: 100%;
  display: block;
}

.resultsOptions {
  float: left;
  /*display: inline-block;*/
  width: 50%;
  line-height: 15px;
  margin-top: 8px;
  cursor: pointer;
}
.resultsOptions input {
  width: 20% !important;
  height: 15px !important;
  display: inline-block;
  float: left;
  margin-top: 10px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  line-height: 15px;
}
#rows {
  display: block;
  font-size: 0.85em;
  color: #555;
  float: left;
  margin-top: 10px;
}
#rows .row {
  width: 100%;
}
#rows .row .input {
  width: 50%;
  float: left;
}
#rows .row .input.half {
  width: 24%;
  float: left;

  margin-right: 3px;
}
#rows .row .input label {
  width: 100%;
  float: left;
  margin-left: 2px;
  /*background: red;*/
}
#rows .row .input input,
#rows .row .input select {
  width: 50%;
  float: left;
  height: 30px;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  outline: none;
}
#rows .row .input.half input,
#rows .row .input.half select {
  width: 100% !important;
}
div.workplace .popUpForm div.idnttyWrap.small,
.register-wrap .popUpForm div.idnttyWrap.small {
  width: 10%;
  height: 40px;
}
div.workplace .popUpForm div.idnttyWrap,
.register-wrap .popUpForm div.idnttyWrap {
  float: left;
  width: 18%;
  height: 90px;
  margin-right: 2%;
  margin-bottom: 2%;
  text-align: center;
  border: 1px solid #666;
  cursor: pointer;
}
div.workplace .popUpForm div.idnttyWrap.small div.icon,
.register-wrap .popUpForm div.idnttyWrap.small div.icon {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #666;
}
div.workplace .popUpForm div.idnttyWrap div.icon,
.register-wrap .popUpForm div.idnttyWrap div.icon {
  float: left;
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 1px solid #666;
}
label.idnttyBox:hover {
  border: 1px solid #999;
}
label.idnttyBox.medium {
  width: 95% !important;
  margin-left: -1px !important;
  font-size: 1.2em !important;
}
label.idnttyBox {
  float: left;
  width: 30px;
  margin-left: 10px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  font-size: 0.8em;
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: pointer;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}


body {
  margin: 0px;
}
html {
    /*font-size: 62.5%;*/
    scroll-behavior: smooth;
}

 .nav-sidebar-wrapper {
  width: fit-content;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}

.sidebar-close-btn {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  top: 0.5rem;
  right: 1rem;
  z-index: 99;
  display: none;
  background: #015958;
  border: 1px solid #015958;
}
.sidebar-close-btn img {
  width: 100%;
}

.nav-sidebar {
  width: 4.3rem;
  background: rgba(1, 89, 88, 0.8);
  outline: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav-sidebar * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.99em;
}

.nav-sidebar-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding-bottom: 1.5rem;
}

.sidebar-logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0;
  background: rgba(255, 255, 255, 0.8);
  min-height: 2.5rem;
  border: 0px;
  margin-bottom: 10px;
}

.sidebar-logo img {
  width: 1.7rem;
  object-fit: contain;
}

.nav-sidebar__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  margin-top: 0px;
}

.nav-sidebar__links li {
  width: auto;
  margin-bottom: -10px;

}
.nav-sidebar__links li:hover {
  width: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background: #fff;
}

.nav-sidebar--expand .nav-sidebar__links li:hover {
  width: 100%;
  border-radius: 0px;
  background: #1b6a69;
}

.nav-sidebar__links li:hover a svg path {
  fill: transparent;
  stroke: #0fc3c1;
}

.nav-sidebar__link {
  width: 2.9rem;
  height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 0rem 0;
  text-decoration: none;
}

.nav-sidebar__link p {
  text-align: left;
  font-weight: 500;
  color: #fff;
  display: none;
  flex: 1;
}

.nav-sidebar__bottom .nav-sidebar__link {
  width: 2.5rem;
  height: 2.5rem;
}

.nav-sidebar__link svg {
  width: 1.3rem;
  height: auto;
  object-fit: contain;
}

.nav-sidebar__link svg path {
  fill: rgba(255, 255, 255, 0.85);
}

.nav-sidebar__link.nav-sidebar__link--stroke-icon svg path {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.85);
}

.nav-sidebar__link--active {
  background: #fff;
}

.nav-sidebar__link--active svg path {
  fill: #0fc3c1;
}

.nav-sidebar__bottom .nav-sidebar__link--active svg path {
  fill: rgba(255, 0, 0, 0.7);
}

.nav-sidebar__link--active.nav-sidebar__link--stroke-icon svg path {
  fill: transparent;
  stroke: #0fc3c1;
}

.nav-sidebar__bottom
  .nav-sidebar__link--active.nav-sidebar__link--stroke-icon
  svg
  path {
  fill: transparent;
  stroke: rgba(255, 0, 0, 0.7);
}

.nav-sidebar__bottom .nav-sidebar__link svg {
  width: 1.5rem;
}

.nav-sidebar--expand {
  width: fit-content !important;
  background: rgba(1, 89, 88, 1) !important;
}

.sidebar-logo--expand {
  display: none !important;
}

.nav-sidebar--expand .sidebar-logo--expand {
  display: block !important;
}

.nav-sidebar--expand .sidebar-logo--default {
  display: none !important;
}

.nav-sidebar--expand .sidebar-logo img {
  width: 7.5rem !important;
}

.nav-sidebar--expand .nav-sidebar__links li {
  width: 100% !important;
  padding: 5px 0px;
}
.nav-sidebar--expand .nav-sidebar__links li i.fa {
  font-size: 25px !important;
  margin-left: -5px;
}

.nav-sidebar--expand .nav-sidebar__link {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  justify-content: flex-start !important;
  box-sizing: border-box;
}

.nav-sidebar--expand .nav-sidebar__link p {
  display: block !important;
}

.nav-sidebar--expand .nav-sidebar__link--active {
  background: rgba(255, 255, 255, 0.1) !important;
}
ul,
p {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}
.has-sub {
  position: relative;
  width: 100%;
}

.sub-menu {
  width: 200px;
  background: #fff;
  -webkit-box-shadow: inset 1px 1px 5px 1px #767575;
  box-shadow: 1px 1px 15px 1px #767575;
  margin: 10%;
  position: absolute;
  border-radius: 10px;
  transition: 0.3s;
  padding: 5px 0px;
  top: 0px;
  left: 130%;
  font-size: .9em;
  display: none;
  transition: display 0.3s ease-in-out;

}
.sub-menu.visible {
  display: block;
}

/*.has-sub:hover .sub-menu {
  display: block;
}
*/
.sub-menu a {
  font-size: 1.1em;
  display: flex;
  /*width: fit-content;*/
  padding: 5px 15px;
  transition-duration: 400ms;
  text-decoration: none;
}
.sub-menu a:hover {
  background: #2f77762e;
}
.nav-sidebar--expand .sub-menu {
  left: 95%;
}



.nav-sidebar__bottom {
  /*margin-bottom: 20px;*/
}

/*Datatables*/
div.dataTables_wrapper div.dataTables_length select {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
  margin-right: 10px;
}
div.dataTables_wrapper div.dataTables_length label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  content: "Show";
}
div.dataTables_wrapper div.dataTables_filter input {
  outline: none;
}
div.dataTables_wrapper div.dataTables_filter {
  margin-bottom: 10px;
}
.edurdur-edatable {
  border: 1px solid #ccc;
  border-radius: 3px;
}
.edurdur-edatable thead tr {
  font-size: 0.9em;
  background: #2f77763d;
  margin-top: 10px;
  border-radius: 3px;
}
.edurdur-edatable tbody tr:nth-of-type(even) {
  background: #cddede85;
}

.edurdur-edatable tbody .fa {
  margin-right: 10px;
  text-decoration: none;
  color: #777;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
}
.edurdur-edatable tbody .fa:hover {
  opacity: 0.5;
}

.edurdur-edatable tbody td {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.edurdur-edatable tbody td:last-of-type {
  /*border-right: 0px;*/
  /*border-bottom: 0px;*/
}


@media (min-width: 1650.98px) {
  .nav-sidebar {
    width: 5.7rem;
  }

  .sidebar-logo {
    padding: 1.3rem 0;
  }

  .sidebar-logo img {
    width: 2rem;
  }

  .nav-sidebar__links {
    gap: 1rem;
    margin-top: 1rem;
  }

  .nav-sidebar__link svg {
    width: 1.6rem;
  }
}

/* table filter */
.table_filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table_filter input {
  width: 96%!important;
}
@media screen and (max-width: 768px) {
  .table_filter {
    flex-direction: column;
    align-items: stretch;
  }
  .table_filter input {
    width: 100%;
  }
}