@font-face {
  font-family: "CSChatThaiUI";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/CSChatThai/CSChatThaiUI.eot"); /* IE9 Compat Modes */
  src: url("../fonts/CSChatThai/CSChatThaiUI.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/CSChatThai/CSChatThaiUI.otf") format("opentype"), /* Open Type Font */
  url("../fonts/CSChatThai/CSChatThaiUI.svg") format("svg"), /* Legacy iOS */
  url("../fonts/CSChatThai/CSChatThaiUI.ttf") format("truetype"), /* Safari, Android, iOS */
  url("../fonts/CSChatThai/CSChatThaiUI.woff") format("woff"), /* Modern Browsers */
  url("../fonts/CSChatThai/CSChatThaiUI.woff2") format("woff2"); /* Modern Browsers */
}

@font-face {
  font-family: "THSarabun";
  src: url("../fonts/THSarabun.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "THSarabun";
  src: url("../fonts/THSarabun Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "THSarabun";
  src: url("../fonts/THSarabun BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "THSarabun";
  src: url("../fonts/THSarabun Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "THSarabunIT9";
  src: url("../fonts/THSarabunIT9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "THSarabunIT9";
  src: url("../fonts/THSarabunIT9 Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "THSarabunIT9";
  src: url("../fonts/THSarabunIT9 BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "THSarabunIT9";
  src: url("../fonts/THSarabunIT9 Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Sarabun";
  src: url("../fonts/Sarabun/Sarabun-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

body {
  font-family: "CSChatThaiUI", SansSerif !important;
}
.font-thsarabun {
  font-family: "THSarabun" !important;
}
.font-thsarabun-bold {
  font-family: "THSarabun" !important;
  font-weight: bold;
  font-style: normal;
}
.font-thsarabun-bolditalic {
  font-family: "THSarabun" !important;
  font-weight: bold;
  font-style: italic;
}
.font-thsarabun-italic {
  font-family: "THSarabun" !important;
  font-weight: normal;
  font-style: italic;
}
.font-thsarabunit9 {
  font-family: "THSarabunIT9" !important;
}
.font-thsarabunit9-bold {
  font-family: "THSarabunIT9" !important;
  font-weight: bold;
  font-style: normal;
}
.font-thsarabunit9-bolditalic {
  font-family: "THSarabunIT9" !important;
  font-weight: bold;
  font-style: italic;
}
.font-thsarabunit9-italic {
  font-family: "THSarabunIT9" !important;
  font-weight: normal;
  font-style: italic;
}
.content-top-padding{
  margin-top:80px;
}
.content-wrapper {
  min-height: 100vh;
}
.sidebar-color {
  background-color: #2b383e !important;
  color:RGBA(255,255,255,0.6) !important;
  font-family: "CSChatThaiUI";
}
.sidebar-link-color {
  color:#aaafb2 !important;
  font-size: 16px !important;
  font-weight:500 !important;
  font-family: "CSChatThaiUI";
}
.sidebar-link-color:hover {
  color: #d5d7d8 !important;
  font-size: 16px !important;
  font-weight:500 !important;
  font-family: "CSChatThaiUI" !important;
}
.sidebar-fa-size {
  font-size: 16px !important;
  font-weight:bold !important;
}
.navbar-link-color {
  color:#ffffff;
  text-decoration: none;
}
.navbar-link-color:hover {
  color:#ffffff;
  text-decoration: none;
}
.navbar-fa-size-header {
  font-size: 20px !important;
}
.navbar-fa-size {
  font-size: 14px !important;
}
.brand-img {
  height: 30px;
}
.nav-text{
  font-family: "CSChatThaiUI" !important;
  color:#ffffff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  font-family: "CSChatThaiUI" !important;
}
.text-shadow-header {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1)!important;
}
.text-normal {
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  color: #5a5a5a !important;
}
.text-normal {
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  color: #5a5a5a !important;
}
.text-warn {
  font-size: 13px !important;
  font-family: "CSChatThaiUI";
  color: #D0312D !important;
}
.text-header {
  font-size: 16px !important;
  font-weight : bold !important;
  font-family: "CSChatThaiUI";
}
.text-header-x2 {
  font-size: 20px !important;
  font-weight : 400 !important;
  font-family: "CSChatThaiUI";
}
.box-radius{
  border-radius: 10px !important;
}
.ddc-color {
  color: #000000 !important;
}
.ddc-color-text{
  color: #5a5a5a !important;
}
.text-color-caption{
  color: #a9a9a9 !important;
}
.text-color-form{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: 500;
  color: #424242 !important;
}
.text-label{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: 500;
}

.bootstrap-select .btn:focus {
  outline: none !important;
}
.form-control:focus {
  border-color:  #e84c93 !important;
  outline: none !important;
}

.bg-preview-btn-color {
  background-color: #d81b60 !important;
  padding: 0.2rem 0.3rem;
  font-size: 0.675rem;
  line-height: 1.3;
  border-radius: 0.2rem;
  border: 1px solid;
}

.preview-position {
  margin-left: 31rem;
  margin-top: 11rem ;
}

.text-breadcrumb {
  font-size: 12px !important;
  font-family: "CSChatThaiUI";
  color: #979c9f !important;
}


.text-breadcrumb-active {
  font-size: 12px !important;
  font-family: "CSChatThaiUI";
  font-weight: 500;
  color: #5a6675 !important;
}

.bg-color {
  background-color: #e84c93 !important;
  font-family: "CSChatThaiUI";
}
.font-color {
  color: #ffffff !important;
  font-family: "CSChatThaiUI";
  font-size: 24px;
}
.font-ddc {
  color: #e84c93 !important;
  font-family: "CSChatThaiUI";
  font-size: 24px !important;
}
.btn-ddc {
  background-color: #f0c9d7 !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  font-size: 24px !important;
  font-family: "CSChatThaiUI";
}
.btn-ddc-menu {
  background-color: #ffffff !important;
  color: #bf4372 !important;
  border: 1px solid #acacac !important;
  border-radius: 10px!important;
  font-size: 16px !important;
  font-family: "CSChatThaiUI"!important;
  padding : 20px !important;
}
.btn-ddc-menu:hover {
  background-color: #e84c93 !important;
  color: #ffffff !important;
  border: 1px solid #acacac !important;
  border-radius: 10px!important;
  font-size: 16px !important;
  font-family: "CSChatThaiUI"!important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1)!important;
  padding : 20px !important;

}

.btn-ddc-menu-small {
  background-color: #ffffff !important;
  color: #bf4372 !important;
  border: 1px solid #acacac !important;
  border-radius: 10px!important;
  font-size: 16px !important;
  font-family: "CSChatThaiUI"!important;
  padding : 10px !important;
}
.btn-ddc-menu-small:hover {
  background-color: #e84c93 !important;
  color: #ffffff !important;
  border: 1px solid #acacac !important;
  border-radius: 10px!important;
  font-size: 16px !important;
  font-family: "CSChatThaiUI"!important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1)!important;
  padding : 10px !important;

}

.table-ddc {
  background-color: #e0e0e0 !important;
  color: #404040 !important;
  font-family: "CSChatThaiUI";
  font-size: 14px !important;
  font-weight:bold;
  vertical-align: middle;
}
.th-ddc-next {
  background-color: #e0e0e0 !important;
  color: #404040 !important;
  font-family: "CSChatThaiUI";
  font-size: 14px !important;
  font-weight:normal !important;
  vertical-align: middle;
}
.padding-lr {
  padding-right: 5px;
  padding-left: 5px;
  font-family: "CSChatThaiUI";
}

.bg-ddc {
  background-image: linear-gradient(#ea689f, #c64890, #f0c9d7, #f5e7ec);
  font-family: "CSChatThaiUI";
}
.bg-ddc-color {
  background-color: #ea689f !important;
  font-family: "CSChatThaiUI";
}
.bg-history-btn-color {
  background-color: #d81b60 !important;
}
.bg-command-color {
  background-color: #e83e8c !important;
}
.bg-action-color {
  background-color: #007bff !important;
}

.input-ddc {
  font-family: "CSChatThaiUI";
  font-size: 20px !important;
  border-radius: 15px !important;
  -webkit-box-shadow: 0px 0px 5px -1px #7c7c7c;
  -moz-box-shadow: 0px 0px 5px -1px #7c7c7c;
  box-shadow: 0px 0px 5px -1px #7c7c7c;
}


.table {
  border: 1px solid rgb(255, 255, 255);
}

.table thead th {
  vertical-align: middle !important;
}

.table td {
  border-left: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-top: none!important;
}

.breadcrumb .breadcrumb-item:nth-child(2)::before {
  content: ">";
}

.breadcrumb .breadcrumb-item:nth-child(3)::before {
  content: ">";
}

.btn-no-border:focus{
  outline:0 !important;
}
.btn-rounded {
  -webkit-border-radius: 25rem;
  border-radius: 25rem;
}
.btn-color-search{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#7c7c7c !important;
  border:0 !important;
}
.btn-color-submit{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#179c98 !important;
  border:0 !important;
}
.btn-color-menu{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#179c98 !important;
  border:0 !important;
}
.btn-color-add{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#e84c93 !important;
  border:0 !important;
}
.btn-color-add-small{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#e84c93 !important;
  border:0 !important;
}
.btn-color-delete{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#a54c0f !important;
  border:0 !important;
}
.btn-color-submit2{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#179c98 !important;
  border:0 !important;
}

.btn-color-choose-pattern{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#FF658A !important;

}
.form-auto .nav-link.active{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color: #e84c93 !important;
}

.form-auto .nav-link.disabled{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #CCCCCC !important;
  background: #eeeeee!important;
}

.form-auto .nav-link{
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #424242; !important;
  background: #eeeeee!important;
}


.btn-color-submit-small{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#179c98 !important;
  border:0 !important;
}

.btn-color-signature-small{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color: #4c9fe8 !important;
  border:0 !important;
}

.badge-form-auto{
  color: #ffffff !important;
  background-color: #179c98 !important;
}

.btn-color-delete-small{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#a54c0f !important;
  border:0 !important;
}

.btn-color-disable-small{
  font-size: 14px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  background-color:#6c757d !important;
  border:0 !important;
}

.date-picker-1{
  background-color: #ffffff;
  padding : 0px 15px 5px 15px;
  height: 40px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.date-picker-2{
 border:0px !important;
 padding: 0 !important;
 margin: 0 !important;
}
.date-picker-2:focus{
  border-width: 0px !important;
  outline:0 !important;
 }
.react-datepicker-popper {
  z-index: 9999999 !important;
}
.react-datepicker__input-container:focus {
  border-width: 0px !important;
  outline:0 !important;
}

.tab-active{
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  background-color:#979c9f !important;
  color:#ffffff;
}
.tab-active:hover{
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
  background-color:#979c9f !important;
  color:#ffffff;
}
.rct-node-icon {
  display: none !important;
}
.modal + .modal {
  z-index:1050;
}
.modal-backdrop + .modal-backdrop{
  z-index:1045;
}
@media (max-width: 768px) {
  .text-middle {
    vertical-align: middle !important;
    font-size: 20px !important;
    line-height: 18px !important;
    font-family: "CSChatThaiUI";
  }

  .sidebar-link-color {
    color:#aaafb2 !important;
    font-size: 12px !important;
    font-weight:500 !important;
    font-family: "CSChatThaiUI";
  }
  .sidebar-link-color:hover {
    color: #d5d7d8 !important;
    font-size: 12px !important;
    font-weight:500 !important;
    font-family: "CSChatThaiUI" !important;
  }
}
.btn-category-color {
  width: 70px;
  border: 0px;
  border-radius: 4px;
  height: 40px;
  box-shadow: 0px 0px 2px black;
  cursor: pointer;
}
.btn-category-color:focus {
  outline: none;
}
.category-list-item .item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  padding: 7px 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.category-list-item .item .icon {
  background: #bdbdbd;
  width: 30px;
  height: 30px;
  border-radius: 3px;
}
.category-list-item .item .name {
  margin-left: 20px;
}
.MuiDialog-root, .MuiPopover-root {
  z-index: 9999999 !important;
}
.blink_txt {
  animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.timeline-header {
  /* display: inline; */
  margin-right: -0.6rem;
  color: #ffffff;
  /* padding-left: 2rem; */
  padding-left: 0.25rem;
  /* padding-right: 1rem; */
  padding-right: 0.25rem;
  /* padding-top: 0.4rem;
  padding-bottom: 0.25rem; */
  position: relative;
  /* left: -1.3rem; */
  border-radius: 0 .5rem;
}

/* Fix Dashboard icon size */
@media only screen and (min-width: 992px) {
  .container_menu_dashboard > div:nth-child(2) .inner {
    /* border: red thin solid; */
    padding-bottom: 0px;
  }
  .container_menu_dashboard > div:nth-child(2) p {
    /* border: blue thin solid; */
    margin-bottom: 0px;
    line-height: 25px;
  }
}

@media only screen and (min-width: 1119px) {
  .container_menu_dashboard > div:nth-child(2) .inner {
    /* border: red thin solid; */
    padding-bottom: 10px;
  }
  .container_menu_dashboard > div:nth-child(2) p {
    /* border: blue thin solid; */
    margin-bottom: 15px;
  }
}

.table-header-masexpert {
  background-color: #E0E0E0 !important;
  border: 1px solid rgba(0,0,0,.125);
}

.th-receive {
  background-color: rgb(196, 252, 196) !important;
}

.th-sent {
  background-color:lightblue !important;
}

.btn-order-up {
  padding: 2px;
}

.btn-order-down {
  padding: 2px;
}

.over-name {
  width: 200px;
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow: ellipsis;
  color: white;
  text-align: right;
}

.over-org-name {
  width: 200px;
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow: ellipsis;
  color: white;
}

.link-red, .link-red:hover {
  color:red;
  text-decoration-color: red;
}



/*********** Component History MultiTimeline ***********/

.history-container {
  /* border: red thin solid; */
  /* overflow: scroll; */
}

.history-container > div {
  padding: 0px;
  margin: 0px;
}

.history-container > div > section {
  /* border: blue thin solid; */
  padding: 0px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin: 0px auto !important;
  width: 100% !important;
}

.history-container > div > section > div:not(:first-child) {
  /* border: green thin solid; */
  width: 100% !important;
  padding-left: 35px !important;
}

.timeline-nodes > div:nth-child(3) {
  /* border: red thin solid; */
  padding-left: 5px !important;
  padding-right: 1px !important;
}

.timeline-nodes section {
  width: 100% !important;
}

.timeline-nodes section > div:not(:first-child) {
  /* border: red thin solid; */
  width: 100% !important;
  padding-left: 35px !important;
  margin-left: 0px !important;
}

.timeline-childs {
  border: gainsboro thin solid;
  box-shadow: '10px 10px red !important';
}

/*********** Component History MultiTimeline ***********/

.form-auto-header {
  color: #ffffff !important;
  background-color:#e84c93 !important;
}

/* Set default font-family for rich text quill */
.ql-container.ql-snow {
  font-family: "THSarabun", sans-serif;
  font-size: 17px;
  height: 250px;
}

.ql-disabled, .MuiInputBase-input.Mui-disabled {
  background-color: #e9ecef;
}

.ql-editor {
  line-height: 1.1 !important;
  tab-size: 20 !important;
}

.ql-editor p {
  margin-bottom: 0.5em !important;
}

.ql-editor .ql-font-thsarabun {
  font-family: "THSarabun", sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=thsarabun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=thsarabun]::before {
  content: 'TH Sarabun';
}

.header-doc-button {
  margin-right: -0.75rem;
  margin-left: 5.25rem;
}

.header-doc {
  margin-right: 3rem;
  margin-left: 15rem;
}

.button-stamp {
  font-size: 18px !important;
  font-family: "CSChatThaiUI";
  font-weight: normal;
  color: #ffffff !important;
  border:0 !important;
  width: 106%;
  background-color: #4c9fe8 !important;
}

.hr-custom-width {
width: 20%;
}

.icon-color {
  color: #4c9fe8 !important;
}

.selectInform{
  z-index: 15!important;
}

@keyframes redSwitch {
  0% {
    color: black;
  }

  50% {
      color: black;
  }

  100% {
      color: red;
  }
}