.thai {
    font-family: "Noto Sans Thai", sans-serif !important;
    color: #a5a5a5 ;
}

.sidebarwtg {
    position: fixed;
    top: 0;
    left:0;
    height: 100vh;
    width:225px;
    background-color: #fff;
    transition: all 0.5s ease;
    border-right:1px solid #e7e7e7 !important;
}

.sidebarwtg.active {
    width:105px;
}

.sidebarwtg .sidebar-brand {
    height: 6rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    padding: 1.5rem 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05rem;
    z-index: 1;
    border-bottom:1px solid #e7e7e7 !important
}

.sidebarwtg #btnToggle {
    position: relative;
    font-size:1rem;
    cursor: pointer;
    border-radius: 0.7rem;
    background-color: #F5F5F5;
    width: 2.6rem;
}

.sidebarwtg #btnToggle img.menu{
    height: 1rem !important;
    width: 100%;
    cursor: pointer;
    filter: invert(8%) sepia(11%) saturate(295%) hue-rotate(201deg) brightness(98%) contrast(91%);
}

.sidebarwtg.active #btnToggle {
    left:35%;
}

.sidebarwtg .sidebar-brand p {
    opacity: 1;
}

.sidebarwtg.active .sidebar-brand p {
    display: none !important;
}

.sidebarwtg .sidebar-heading{
    align-items: center;
    padding: 0.6rem 2.2rem 0.1rem;
    font-weight: 400;
    font-size: .875rem;
    color: #a5a5a5 ;
}

.sidebarwtg.active .sidebar-heading {
    text-align: center;
    font-weight: 400;
    font-size: .875rem;
    padding: 0.6rem 1rem 0.1rem;
}

.sidebarwtg .nav-item .nav-link {
    color: #777779;
    font-size: .875rem;
    font-weight: 300;
}

.sidebarwtg.active .nav-item .nav-link span{
    display: none;
}

.sidebarwtg.active .nav-item .nav-link {
    color: #777779;
    text-align: center;
    font-size: .875ßrem;
    display: block;
}

.sidebarwtg .nav-item:hover .nav-link{
    border: 1px solid #e8e8e9;
    border-radius:0.6rem;
    font-size: .875rem;
}

.sidebarwtg.active .nav-item:hover .nav-link{
    border: 1px solid #e8e8e9;
    border-radius:0.6rem;
    text-align: center;
    font-size: .875rem;
}

.sidebarwtg.active .nav-item:hover .nav-link span{
    display: none;
}

.sidebarwtg .nav-item.active .nav-link{
    background-color: #F5F5F5 !important;
    border-radius:0.6rem;
    color: #1d1d1f !important;
    font-size: .85rem;
    font-weight: 600;
}

.sidebarwtg.active .nav-item.active .nav-link{
    background-color: #F5F5F5 !important;
    border-radius:0.6rem;
    color: #1d1d1f !important;
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
}

.sidebarwtg.active .nav-item.active .nav-link span{
    display: none;
}

.sidebarwtg .nav-item .nav-link img.menu-icon {
    height: 1.5rem;
     padding-bottom: 0.3rem;
    padding-right:0.3rem;
    cursor: pointer;
    filter: invert(50%) sepia(0%) saturate(1342%) hue-rotate(79deg) brightness(93%) contrast(86%);
}

.sidebarwtg .nav-item:hover .nav-link img.menu-icon{
filter: invert(50%) sepia(0%) saturate(1342%) hue-rotate(79deg) brightness(93%) contrast(86%);
}

.sidebarwtg .nav-item.active .nav-link img.menu-icon{
filter: invert(6%) sepia(3%) saturate(1293%) hue-rotate(201deg) brightness(95%) contrast(87%);
}

.sidebarwtg .nav-item .nav-link.red {
  color: #777779;
  font-size: .875rem;
  font-weight: 300;
}

.sidebarwtg.active .nav-item .nav-link.red span{
  display: none;
}

.sidebarwtg.active .nav-item .nav-link.red {
  color: #777779;
  text-align: center;
  font-size: .875ßrem;
  display: block;
}

.sidebarwtg .nav-item:hover .nav-link.red{
  border: 1px solid #E50000;
  color: #E50000;
  border-radius:0.6rem;
  font-size: .875rem;
}

.sidebarwtg.active .nav-item:hover .nav-link.red{
  border: 1px solid #E50000;
  color: #E50000;
  border-radius:0.6rem;
  text-align: center;
  font-size: .875rem;
}

.sidebarwtg.active .nav-item:hover .nav-link.red span{
  display: none;
}

.sidebarwtg .nav-item.active .nav-link.red{
  background-color: rgb(249, 235, 235) !important;
  border-radius:0.6rem;
  color: #E50000 !important;
  font-size: .85rem;
  font-weight: 600;
}

.sidebarwtg.active .nav-item.active .nav-link.red{
  background-color: rgb(249, 235, 235) !important;
  border-radius:0.6rem;
  color: #1d1d1f !important;
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
}

.sidebarwtg.active .nav-item.active .nav-link.red span{
  display: none;
}

.sidebarwtg .nav-item .nav-link.red img.menu-icon {
  height: 1.5rem;
   padding-bottom: 0.3rem;
  padding-right:0.3rem;
  cursor: pointer;
  filter: invert(50%) sepia(0%) saturate(1342%) hue-rotate(79deg) brightness(93%) contrast(86%);
}

.sidebarwtg .nav-item:hover .nav-link.red img.menu-icon{
  filter: invert(13%) sepia(88%) saturate(4799%) hue-rotate(360deg) brightness(89%) contrast(122%);
}

.sidebarwtg .nav-item.active .nav-link.red img.menu-icon{
  filter: invert(13%) sepia(88%) saturate(4799%) hue-rotate(360deg) brightness(89%) contrast(122%);
}

.sidebarwtg ul li {
    width:  85%;
    margin: 0.8rem auto;
    align-items: center;
    position: relative;
    list-style-type:none;
}

.sidebarwtg ul li a{
    padding:0.3rem 1rem;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu {
    font-size: 0.85rem;
    display: block;
    text-decoration: none;
    color:#a5a5a5;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu:hover,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu:hover {
    border: 1px solid #a5a5a5;
    border-radius:0.7rem;
    color:#a5a5a5;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu.active,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu.active {
    border-radius:0.7rem;
    color:#1d1d1f;
    font-weight: 400;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu span,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu span {
    display: none;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu.active span,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu.active span{
    display: inline;
    height: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
  }

.sidebarwtg.active .nav-item .collapse .collapse-inner .sub-menu,
.sidebarwtg.active .nav-item .collapsing .collapse-inner .sub-menu {
    font-size: 0.7rem;
    display: block;
    text-decoration: none;
    color:#a5a5a5;
}

.sidebarwtg.active .nav-item .collapse .collapse-inner .sub-menu:hover,
.sidebarwtg.active .nav-item .collapsing .collapse-inner .sub-menu:hover {
    background-color: #eaecf4 !important;
    border-radius:0.6rem;
    color:#e8e8e9;
}

.sidebarwtg.active .nav-item .collapse .collapse-inner .sub-menu.active,
.sidebarwtg.active .nav-item .collapsing .collapse-inner .sub-menu.active {
    border-radius:0.6rem;
    color:#1d1d1f;
    font-weight: 400;
}


.sidebarwtg.active .nav-item .collapse {
width: 8rem;
position: absolute;
left: calc(6.5rem + 1.5rem / 2);
z-index: 1;
top: 2px;
-webkit-animation-name: growIn;
animation-name: growIn;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}
.sidebarwtg.active .nav-item .collapse .collapse-inner {
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
border-radius: 0.35rem;
}
.sidebarwtg.active .nav-item .collapsing {
display: none;
transition: none;
}
.sidebarwtg.active .nav-item .collapse,
.sidebarwtg.active .nav-item .collapsing {
margin: 0;
}

.sidebarwtg.active .nav-item .nav-link[data-toggle="collapse"]::after {
display: none;
}

.sidebarwtg .sidebar-footer {
display: flex;
flex-shrink: 0;
align-items: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
height: 5rem;
background-color: #fff;
border-top: 1px solid #e7e7e7 !important;
position:fixed;
width:224px;
}

.sidebarwtg.active .sidebar-footer {
width:104px;
}

.sidebarwtg.active .sidebar-footer #userprofile{
padding-right:0.6rem;
margin-bottom:0.6rem;
margin-top:0.3rem;
}

.sidebarwtg.active .sidebar-footer #userName p{
display: none;
}

.sidebarwtg.active .sidebar-footer #userName a svg{
padding-right: 1rem;

}

.sidebarwtg.active .sidebar-footer #userName a span{
display: none;
}

.sidebarwtg.active .sidebar-footer #userName div a#settingAcc{
    display: none;
    }

.sidebar-scroll{
height:75%;
overflow-y:auto;
}

@media (max-height:768px) {
    .sidebar-scroll {
    height: 70%;
    }
  }

.main-content{
    position:absolute;
    background-color:#F5F5F5;
    min-height:100vh;
    top:0;
    left: 225px;
    transition: all 0.5s ease;
    width: calc(100% - 225px);
    padding-bottom: 5.5%;
    overflow-y: auto;
}

.sidebarwtg.active ~ .main-content{
    left:105px;
    width: calc(100% - 105px)!important;
}

.wtg-footer{
    position: absolute;
    flex-shrink: 0;
    transition: all 0.5s ease;
    width: 100%;
    display: flex;
    bottom:0;
    padding: 1rem;
}

.sidebarwtg ~ .main-content .navbarwtg {
    position:fixed;
    top: 0;
    height: 6rem;
    background-color: #fff;
    transition: all 0.5s ease;
    border-right:1px solid #e7e7e7 !important;
    margin-left: 0.01rem;
    width: calc(100% - 225px);
    left: 225px;
    z-index: 1030;
}

.sidebarwtg.active ~ .main-content .navbarwtg {
    position:fixed;
    top: 0;
    height: 6rem;
    background-color: #fff;
    transition: all 0.5s ease;
    border-right:1px solid #e7e7e7 !important;
    margin-left: 0rem;
    width: calc(100% - 105px);
    left: 105px;
    z-index: 1030;
}

.sidebarwtg ~ .main-content .navbarwtg  #btnToggleMb {
    font-size:1rem;
    cursor: pointer;
    border-radius: 0.7rem;
    background-color: #F5F5F5;
    height: 40px;
}

.sidebarwtg ~ .main-content .navbarwtg  #btnToggleMb img.menu{
    height: 1rem !important;
    width: 100%;
    cursor: pointer;
    filter: invert(8%) sepia(11%) saturate(295%) hue-rotate(201deg) brightness(98%) contrast(91%);
}

.sidebarwtg.active ~ .main-content .navbarwtg #btnToggleMb {
}

@media (max-width: 768px) {
    .sidebarwtg {
    width:105px;
}

.sidebarwtg.active {
    margin-left:-100px;
}

.sidebarwtg .sidebar-heading{
    align-items: center;
    padding: 0.6rem 1rem 0.1rem;
    font-weight: 600;
    font-size: .7rem;
    text-align: center;
}

.sidebarwtg .nav-item .nav-link span{
    display: none;
}

.sidebarwtg .nav-item .nav-link {
    text-align: center;
    font-size: .7rem;
    display: block;
}

.sidebarwtg .nav-item:hover .nav-link{
    border-radius:0.6rem;
    text-align: center;
    font-size: .7rem;
}

.sidebarwtg .nav-item:hover .nav-link span{
    display: none;
}

.sidebarwtg .nav-item.active .nav-link{
    border-radius:0.6rem;
    color: #1d1d1f !important;
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
}

.sidebarwtg .nav-item.active .nav-link span{
    display: none;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu {
    font-size: 0.7rem;
    display: block;
    text-decoration: none;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu:hover,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu:hover {
    border: 1px solid #e8e8e9;
    border-radius:0.6rem;
    color:#777779;
}

.sidebarwtg .nav-item .collapse .collapse-inner .sub-menu.active,
.sidebarwtg .nav-item .collapsing .collapse-inner .sub-menu.active {
    border: 1px solid #e8e8e9;
    border-radius:0.6rem;
    color:#1d1d1f;
}

.sidebarwtg .nav-item .collapse {
width: 8rem;
position: absolute;
left: calc(6.5rem + 1.5rem / 2);
z-index: 1;
top: 2px;
-webkit-animation-name: growIn;
animation-name: growIn;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}
.sidebarwtg .nav-item .collapse .collapse-inner {
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
border-radius: 0.35rem;
}
.sidebarwtg .nav-item .collapsing {
display: none;
transition: none;
}
.sidebarwtg .nav-item .collapse,
.sidebarwtg .nav-item .collapsing {
margin: 0;
}

.sidebarwtg .nav-item .nav-link[data-toggle="collapse"]::after {
display: none;
}

.sidebarwtg .sidebar-footer #userprofile{
padding-right:0.6rem;
margin-bottom:0.6rem;
margin-top:0.3rem;
}

.sidebarwtg .sidebar-footer #userName p{
display: none;
}

.sidebarwtg .sidebar-footer #userName a svg{
padding-right: 1rem;

}

.sidebarwtg .sidebar-footer #userName a span{
display: none;
}

.main-content{
    position:absolute;
    background-color:#F5F5F5;
    min-height:100vh;
    top:0;
    left: 105px;
    transition: all 0.5s ease;
    width: calc(100% - 104px);
    padding-bottom: 5.5%;
}

.sidebarwtg.active ~ .main-content{
    left:0px;
    width: calc(100% - 0px)!important;
}

.sidebarwtg ~ .main-content .navbarwtg {
    position:relative;
    top: 0;
    height: 6rem;
    background-color: #fff;
    transition: all 0.5s ease;
    border-right:1px solid #e7e7e7 !important;
    width:100%;
    left: 0;
}

.sidebarwtg ~ .main-content .navbarwtg h2{
    font-size:1.3rem;
    padding-top:5%;
}

.sidebarwtg ~ .main-content .navbarwtg h6{
    font-size:0.8rem
}

.sidebarwtg ~ .main-content .navbarwtg img{
    height:2.3rem
}

.sidebarwtg.active ~ .main-content .navbarwtg {
    position:relative;
    top: 0;
    height: 6rem;
    background-color: #fff;
    transition: all 0.5s ease;
    margin-left: 0rem;
    width: calc(100% - 0px);
    left: 0px;
}

.sidebarwtg ~ .main-content .navbarwtg  #btnToggleMb {
    position: relative;
    font-size:1rem;
    cursor: pointer;
    border-radius: 0.7rem;
    top:10%
}

.sidebarwtg.active ~ .main-content .navbarwtg #btnToggleMb {
    top:10%
}

.wtg-footer{
    font-size: 0.8rem;
}

a.wtg-text {
    font-size: 1rem;
}

.subhd {
    font-size: 1rem !important;
    color: #1D1D1F !important;
}

a.wtg-link span.bg-no {
    font-size: 0.625rem !important;
    font-weight: 300;
}

a.wtg-link-red span.bg-off {
    font-size: 0.625rem !important;
    font-weight: 300;
}

}

.subhd {
    color: #1D1D1F !important;
    font-size: 3rem !important;
}

.bg-collapse{
  background-color: #F5F5F5 ;
}

.bg-lightgray {
    background-color: #F5F5F5 !important;
}

.text-40 {
    font-size: 0.4em !important;
}

.text-50 {
    font-size: 0.5em !important;
}

.text-60 {
    font-size: 0.6em !important;
}

.text-70 {
    font-size: 0.7em !important;
}

.text-80 {
    font-size: 0.8em !important;
}

.text-90 {
    font-size: 0.9em !important;
}

.text-100 {
    font-size: 1em !important;
}

.text-110 {
    font-size: 1.1em !important;
}

.text-120 {
    font-size: 1.2em !important;
}

.text-130 {
    font-size: 1.3em !important;
}

.text-140 {
    font-size: 1.4em !important;
}

.text-150 {
    font-size: 1.5em !important;
}

.text-160 {
    font-size: 1.6em !important;
}

.text-170 {
    font-size: 1.7em !important;
}

.text-180 {
    font-size: 1.8em !important;
}

.text-190 {
    font-size: 1.9em !important;
}

.text-200 {
    font-size: 2em !important;
}

.text-95 {
    font-size: 0.95em !important;
}

.text-85 {
    font-size: 0.85em !important;
}

.text-75 {
    font-size: 0.75em !important;
}

.text-105 {
    font-size: 1.05em !important;
}

.text-115 {
    font-size: 1.15em !important;
}

.text-125 {
    font-size: 1.25em !important;
}

.text-xs {
    font-size: 0.625rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.text-md {
    font-size: 1rem !important;
}

.text-lg {
    font-size: 1.25rem !important;
}

.text-xl {
    font-size: 1.5rem !important;
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.text-16 {
    font-size: 1rem !important;
}

.text-14 {
    font-size: 0.875rem !important;
}

.text2rem {
    font-size: 2rem !important;
}

.text-black {
    color: #1D1D1F !important;
}

.text-black:hover {
    color: #1D1D1F !important;
}

.text-green {
    color: #299E00 !important ;
}

.text-green:hover {
    color: #299E00 !important ;
}

.text-red {
    color: #E50000 !important ;
}

.text-red:hover {
    color: #E50000 !important ;
}

.text-yellow {
    color: #EA9A00 !important ;
}

.text-yellow:hover {
    color: #EA9A00 !important ;
}

.text-aqua {
  color: #047DED !important
 }

 .text-aqua:hover {
  color: #047DED !important;
 }

.wtgsubhd {
    color: #8e8e8f !important;
    font-weight: 300 !important;
}

.wtg-text {
color:#38a3a5 !important;
}

.wtg-text:hover {
    color:#38a3a5 !important;
    }

.btn-fast {
    background-color: #fff;
    border-color: #c8cad1;
    color: #38a3a5;
    border-radius: 0.625rem;
    font-weight: 300;
    height: 2.1rem;
}

.btn-fast:hover {
    background-color: #fff;
    border: 0.5px solid #38a3a5;
    color: #38a3a5;
    box-shadow: 0 0 1px #38a3a5;
    border-radius: 0.625rem;
}

.btn-edit {
    background-color: #f5f5f5;
    color: #1D1D1F;
    border-radius: 3rem;
    font-weight: 300;
    width: 6rem;
}

.btn-edit:hover {
    background-color: #1D1D1F;
    color: #fff;
    border-radius: 3rem;
}

.btn-filter {
    background-color: #D8D8D8;
    color: #1D1D1F;
    border-radius: 3rem;
    font-weight: 300;
}

.btn-filter:hover {
    background-color: #a5a5a5;
    color: #1D1D1F;
    border-radius: 3rem;
}

.btn-filter.active {
    background-color: #fff;
    color: #1D1D1F;
    border: 1px solid #1D1D1F;
    border-radius: 3rem;
}


.btn-send {
    background-image: linear-gradient(270deg, #492A70, #AC6AFF, #492A70, #AC6AFF);
    color: #fff;
    font-size: 1rem;
    background-position: left;
    background-size: 300%;
    transition: background-position 0.5s ease-in-out;
    font-weight: 300;
}

.btn-send:hover {
    color:white;
    background-position: right;
    transition: background-position 0.5s ease-in-out;
}

.btn-delete{
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    border: 0;
    color: #1D1D1F;
    background-color: #fff;
    font-size: 0.875rem;
    border-radius:0.3rem;
}

.btn-delete:hover{
    color: #fff;
    background-color: #1d1d1f;
}

.btn-gray{
    color:#fff;
    background-color: #a5a5a5;
}

.btn-erase {
  display: block;
    width: 100%;
    padding: .5rem .875rem;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    border: 2px solid #FACCCC;
    color: #E50000;
    background-color: transparent;
    font-size: 1rem;
    border-radius:0.3rem;
}

.btn-erase:hover {
    color: #fff;
    background-color: #E50000;
}

.btn-lightgray{
  color:#8e8e8f;
  background-color: #f5f5f5;
  border-radius: 0.625rem;
}

a {
    text-decoration: none !important;
    cursor: pointer;
}


a.wtg-link {
    color: #858796 !important;
    text-decoration: none;
    font-weight: 300;
    padding-bottom: 0.2rem;
}

a.wtg-link:hover {
    color: #1D1D1F !important;
    text-decoration: none;
}

a.wtg-link.active {
    color: #1D1D1F !important;
    border-bottom: 3px solid #1D1D1F !important;
    text-decoration: none;
    font-weight: 600;
}

a.wtg-link-red {
  color: #e66464 !important;
  text-decoration: none;
  font-weight: 300;
  padding-bottom: 0.2rem;
}

a.wtg-link-red:hover {
  color: #E50000 !important;
  text-decoration: none;
}

a.wtg-link-red.active {
  color: #E50000 !important;
  border-bottom: 3px solid #E50000 !important;
  text-decoration: none;
  font-weight: 600;
}

a.wtg-link span.bg-no {
    background-color: #e8e8e9 !important;
    color: #8e8e8f !important;
    font-size: 0.875rem ;
    border-radius: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
    font-weight: 300;
}

a.wtg-link:hover span.bg-no {
  background-color: #1D1D1F !important;
  color: #fff !important;
  border-radius: 0.3rem;
}

a.wtg-link.active span.bg-no {
  background-color: #1D1D1F !important;
  color: #fff !important;
  border-radius: 0.3rem;
}

a.wtg-link-red span.bg-off {
  background-color: rgb(247, 220, 220) !important;
  color: #fff !important;
  border-radius: 0.3rem;
  font-size: 0.875rem ;
    border-radius: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
    font-weight: 300;
}

a.wtg-link-red:hover span.bg-off {
background-color: #E50000 !important;
color: #fff !important;
border-radius: 0.3rem;
}

a.wtg-link-red.active span.bg-off {
background-color: #E50000 !important;
color: #fff !important;
border-radius: 0.3rem;
}

/* a.wtg-link-green span.bg-on {
    font-size: 0.625rem !important;
    font-weight: 300;
} */

a.wtg-link-green {
    color: #9acf8ef0 !important;
    text-decoration: none;
    font-weight: 300;
    padding-bottom: 0.2rem;
}

a.wtg-link-green:hover {
    color: #00A407 !important;
    text-decoration: none;
  }

  a.wtg-link-green.active {
    color: #00A407 !important;
    border-bottom: 3px solid #00A407 !important;
    text-decoration: none;
    font-weight: 600;
  }

  a.wtg-link-green:hover span.bg-on {
    background-color: #00A407 !important;
    color: #fff !important;
    border-radius: 0.3rem;
    }

    a.wtg-link-green.active span.bg-on {
    background-color: #00A407 !important;
    color: #fff !important;
    border-radius: 0.3rem;
    }
    a.wtg-link-green span.bg-on {
        background-color: #9acf8ef0 !important;
        color: #fff !important;
        font-size: 0.875rem;
        border-radius: 0.3rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.3rem;
        padding-bottom: 0.2rem;
        font-weight: 300;
      }


/* a.wtg-link-yellow span.bg-stop {
    font-size: 0.625rem !important;
    font-weight: 300;
} */

a.wtg-link-yellow {
    color: rgb(209, 191, 136) !important;
    text-decoration: none;
    font-weight: 300;
    padding-bottom: 0.2rem;
}

a.wtg-link-yellow:hover {
    color: #272727 !important;
    text-decoration: none;
  }

  a.wtg-link-yellow.active {
    color: #F6DE00 !important;
    border-bottom: 3px solid #F6DE00 !important;
    text-decoration: none;
    font-weight: 600;
  }

  a.wtg-link-yellow:hover span.bg-stop {
    background-color: #F6DE00 !important;
    color: #030000 !important;
    border-radius: 0.3rem;
    }

    a.wtg-link-yellow.active span.bg-stop {
    background-color: #F6DE00 !important;
    color: #000000 !important;
    border-radius: 0.3rem;
    }
    a.wtg-link-yellow span.bg-stop {
        background-color: rgb(251, 236, 191) !important;
        color: #fff !important;
        font-size: 0.875rem;
        border-radius: 0.3rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.3rem;
        padding-bottom: 0.2rem;
        font-weight: 300;
      }

.icon-heading {
    height: 2.5rem;
    padding-bottom: 0.6rem;
	cursor: pointer;
    filter: invert(6%) sepia(3%) saturate(1293%) hue-rotate(201deg) brightness(95%) contrast(87%);
}

.icon-button {
    width: auto;
    height: 2rem;
}

.btn-fast img.icon-btn-fast,
a img.icon-wtg-text{
    cursor: pointer;
    height: 1.5rem;
    padding-bottom: 0.2rem;
    width:auto;
    filter: invert(52%) sepia(70%) saturate(378%) hue-rotate(132deg) brightness(93%) contrast(87%);
}

.btn-save img.icon-btn-save{
    cursor: pointer;
    height: 1.5rem;
    padding-bottom: 0.1rem;
    width:auto;
    filter: invert(52%) sepia(70%) saturate(378%) hue-rotate(132deg) brightness(93%) contrast(87%);
}

.btn-save:hover img.icon-btn-save{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(329deg) brightness(107%) contrast(101%);
}

.btn-cancle img.icon-btn-cancle{
    cursor: pointer;
    height: 1.5rem;
    padding-bottom: 0.2rem;
    width:auto;
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(329deg) brightness(107%) contrast(101%);
}

.btn-cancle:hover img.icon-btn-cancle{
  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(329deg) brightness(107%) contrast(101%);
}

.btn-edit img.icon-btn-edit{
    cursor: pointer;
    height: 1.3rem;
    padding-bottom: 0.2rem;
    width:auto;
    filter: invert(6%) sepia(0%) saturate(5428%) hue-rotate(11deg) brightness(97%) contrast(88%);
}

.btn-edit:hover img.icon-btn-edit{
    cursor: pointer;
    height: 1.3rem;
    padding-bottom: 0.2rem;
    width:auto;
    filter: invert(100%) sepia(6%) saturate(25%) hue-rotate(248deg) brightness(106%) contrast(106%);
}

img.icon-white {
    height: 1rem;
    width: auto;
    filter: invert(100%) sepia(1%) saturate(3043%) hue-rotate(350deg) brightness(104%) contrast(100%);
}

img.icon-black {
    height: 1rem;
    width: auto;
    filter: invert(7%) sepia(2%) saturate(2647%) hue-rotate(201deg) brightness(83%) contrast(88%);
}

img.icon-wtg{
    height: 1rem;
    width: auto;
    filter: invert(54%) sepia(49%) saturate(502%) hue-rotate(132deg) brightness(93%) contrast(90%);
}

img.icon-gray{
    height: 1rem;
    width: auto;
    filter: invert(76%) sepia(0%) saturate(1943%) hue-rotate(142deg) brightness(88%) contrast(90%);
}

.bg-lightred {
    background-color: rgb(255, 240, 240) !important;
}

.bg-lightblue {
    background-color: rgb(242, 248, 255) !important;
}

.bg-lightnavy {
    background-color: #e1e5f3 !important;
}

.bg-lightgreen {
    background-color: rgb(235, 246, 226) !important;
}

.bg-lightyellow {
  background-color: #fff7e8 !important;
}

.bg-black {
    background-color: #1D1D1F;
}

.bg-imie {
    background-color: #dfeeee;
    border: 1px solid #38A3A5;
}

.bg-send{
    background: #F5F5F5;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.bg-purplegd {
    background: linear-gradient(180deg, rgba(73, 42, 112, 0) 0%, rgba(73, 42, 112, 0.28) 100%);
}

.bg-greengd {
    background: linear-gradient(0deg, rgba(0, 164, 7, 0) 0%, rgba(0, 164, 7, 0.15) 180%);
}

.bg-yellowgd {
    background: linear-gradient(0deg, rgba(234, 154, 0, 0) 0%, rgba(234, 154, 0, 0.15) 140%);
}

.bg-navygd {
    background: linear-gradient(0deg, rgba(34, 87, 122, 0) 0%, rgba(34, 87, 122, 0.15) 180%);
}

.bg-yellow {
    background-color: #EA9A00;
}

.bg-green{
    background-color: #00A407;
}

.bg-navy {
    background-color: #22577a;
}

.wtgheading {
    color: #22577a !important;
}

.text-blue {
color: #6AC4FF !important ;
}

.text-purple {
    color: #9747FF !important;
}

.modalbg {
    background-color: #38a3a5;
}

.btn-cancle {
    background-color: #38a3a5;
    border-color: #fff;
    color: #fff;
    border-radius: 0.625rem;
}

.btn-cancle:hover {
    background-color: #32bbbd;
    border-color: #32bbbd;
    color: #fff;
    border-radius: 0.625rem;
}

.btn-save {
    background-color: #fff;
    border-color: #38a3a5;
    color: #38a3a5;
    border-radius: 0.625rem;
}

.btn-save:hover {
    background-color: #38a3a5;
    border-color: #fff;
    color: #fff;
    border-radius: 0.625rem;
}

.btn-doc {
    background-color: #eaecf4;
    border-color: #c8cad1;
    color: #38a3a5;
    border-radius: 0.3rem;
}

.btn-doc:hover {
    background-color: #38a3a5;
    border-color: #38a3a5;
    color: #fff;
    border-radius: 0.3rem;
}

.btn-more {
    background-color: #fff;
    border-color: #c8cad1;
    color: #38a3a5;
    border-radius: 0.3rem;
}

.btn-more:hover {
    background-color: #38a3a5;
    border-color: #38a3a5;
    color: #fff;
    border-radius: 0.3rem;
}

.btn-more img.icon-btn-more{
    cursor: pointer;
    height: 1rem;
    width:auto;
    filter: invert(52%) sepia(70%) saturate(378%) hue-rotate(132deg) brightness(93%) contrast(87%);
}

.btn-more:hover img.icon-btn-more{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(329deg) brightness(107%) contrast(101%);
}

.btn-purple{
    background-color: #9747FF;
    color: #fff;
    border-radius: 3rem;
    border: 1px solid gray;
}

.btn-white{
    background-color: #fff;
    color: gray;
    border-radius: 3rem;
    border: 1px solid gray;
}

.btn-add{
    background-color: #dff4f4;
    color: #38A3A5;
    border-radius: 0.7rem;
}

.btn-add:hover{
    color: #38A3A5;
}

.btn-chat{
    color:#a5a5a5;
    width:93%;
    display: block !important;
    border-bottom: 0.5px solid #ddd;
    padding-right: 1rem;
}

.btn-chat:hover{
    border-radius: 0 !important;
    color: #1D1D1F;
    border-bottom: 1px solid #1D1D1F;
}

.btn-chat.active{
    border-radius: 0 !important;
    background-color: #1D1D1F !important;
    color: #fff !important;
    width: 100%;
}

.btn-chat-menu{
 height: 40px;
 width:150px;
}

.btn-chat-menu:hover,
.btn-chat-menu.active{
  border-radius: 0.7rem !important;
  background: #F5F5F5;
  font-weight: 600;
  color:#1D1D1F;
  height: 40px;
 width:150px;
}

.btn-create{
    background-color: #fff;
    border-color: #38a3a5;
    color: #38a3a5;
    box-shadow: 0 0 2px #38a3a5;
    border-radius: 0.7rem;

}

.btn-create{
    padding:1rem;
    background-color: #fff;
    color: #a5a5a5;
    border-radius: 0.5rem;
    height:190px;
    width:190px;

}

.btn-create:hover{
    background-color: #fff;
    border: 2px solid #38a3a5;
    box-shadow: 0 0 30px #38a3a5;

}

.btn-create img.icon-create{
    height: 6rem;
    width:auto;

}

.btn-create:hover img.icon-create{
    filter: invert(50%) sepia(84%) saturate(335%) hue-rotate(132deg) brightness(95%) contrast(83%);

}

.btn-phone{
    position: relative;
    background-color: transparent;
    height: 2rem;
    width: auto;
    cursor: pointer;
}

.btn-phone img.image-main{
    height: 2rem;
    width: auto;
    margin-top: 0.8rem;
}

.btn-phone img.image-hover {
    height:2rem ;
    margin-top: 0.8rem;
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s;
  }
  .btn-phone:hover img.image-hover {
    margin-top: 0.8rem;
    opacity: 1;
    filter: invert(50%) sepia(84%) saturate(335%) hue-rotate(132deg) brightness(95%) contrast(83%);
  }


.close-doc {
    float: left !important;
    font-size: 1.8rem !important;
    line-height: 1;
    color: #fff !important;
    text-shadow: 0 1px 0 #fff;
    padding: 0 !important;
    margin-left: 4.5rem !important;
}

.close-doc:hover {
    color: #1d1d1f !important;
}

.close {
    float: right;
    font-size: 1.5rem !important;
    font-weight: 400;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
  }

.bg-white {
  background-color: #fff !important;
}

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    @media (max-width: 768px) {
      font-size: 12px;
    }
  }

  .stepper-item .step-counter {
    position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 7px;
  background: #616162;
  margin-top:0.65rem;
  }

  .stepper-item img {
      position: relative;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 1px solid #a5a5a5;
    width: 100%;
    top: 4rem;
    left: -50%;
    z-index: 2;
  }

  .stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 1px solid #a5a5a5 ;
    width: 100%;
    top: 4rem;
    left: 50%;
    z-index: 2;
  }

  .stepper-item:first-child::before {
    content: none;
  }
  .stepper-item:last-child::after {
    content: none;
  }

  .icon-step{
      height:50px;
      width:auto;
  }

  .bg-yellow {
      background-color: #EA9A00 !important;
  }

  .bg-green {
      background-color: #00A407 !important;
  }

  .bg-navy {
      background-color: #22577A !important;
  }

label {
    font-weight: 300 !important;
    color: #8e8e8f !important ;
    font-size: 0.875rem !important;

}

.wtgform {
    max-width: 100%;
    border-radius: 0.7rem;
}

.wtglabel {
    display: block;
    float: left;
    position: absolute;
    padding: 0.4rem 0.2rem 0.2rem 0.8rem;
    color: #a2a2a2;
    font-size: 0.9rem;
    overflow: hidden;
}

.wtgform input[type="text"],
.wtgform input[type="date"],
.wtgform input[type="datetime"],
.wtgform input[type="email"],
.wtgform input[type="number"],
.wtgform input[type="search"],
.wtgform input[type="time"],
.wtgform input[type="url"],
.wtgform input[type="password"],
.wtgform textarea {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 60px;
    display: block;
    line-height: 25px;
    font-size: 0.9rem;
    padding-top: 1.8rem;
    border-radius: 0.7rem;
    border: 1px solid #bbbbbc;
    outline: none;
}
.wtgform select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 60px;
    display: block;
    line-height: 25px;
    font-size: 0.9rem;
    padding-top: 1.8rem;
    border-radius: 0.7rem;
    border: 1px solid #bbbbbc;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bbbbbc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e" );
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 14px auto;
    outline: none;
}

.wtgform input[type="text"]:focus,
.wtgform input[type="date"]:focus,
.wtgform input[type="datetime"]:focus,
.wtgform input[type="email"]:focus,
.wtgform input[type="number"]:focus,
.wtgform input[type="search"]:focus,
.wtgform input[type="time"]:focus,
.wtgform input[type="url"]:focus,
.wtgform input[type="password"]:focus,
.wtgform textarea:focus,
.wtgform select:focus {
}
.wtgform textarea {
    resize: none;
}

.wtgfile {
display: block;
width: 90%;
height: 3.125rem;
padding: .75rem .75rem;
font-size: 0.9rem;
font-weight: 300;
line-height: 1.5;
color: #1D1D1F !important;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #e8e8e9;
border-radius: .35rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.wtguploadfile {
    display: block;
    width: 90%;
    height: 3.125rem;
    padding: .75rem .75rem;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5;
    color: #a5a5a5 !important;
    background-color: #F5F5F5;
    background-clip: padding-box;
    border: 1px solid #e8e8e9;
    border-radius: .35rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

input[type=file].wtginputimg {
    width: 180px;
    height:180px;
    color: transparent;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #38A3A5;
  }

  input[type=file].wtginputimg::file-selector-button {
    margin-left: 32px;
      margin-right: 35px;
      margin-top: 60px;
    border: none;
    background: #38A3A5;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
      content: "อัพโหลดรูปภาพ";
  }

  input[type=file].wtginputimg::file-selector-button:hover {
    background: #2D888A;
  }

  input[type=file].wtgcompinputimg {
    width: 500px;
    height:150px;
    color: transparent;
    padding: 5px;
    background: #e8e8e8;
    border-radius: 10px;
    border: 1px solid #bbbbbc;
  }

  input[type=file].wtgcompinputimg::file-selector-button {
    margin-left: 50px;
      margin-top: 50px;
    border: none;
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    color: #38A3A5;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
      content: "อัพโหลดรูปภาพ";
      border: 1px solid #bbbbbc;

  }


  .table td {
    border-top: 1px solid #e8e8e9 !important ;
    font-size: 0.875rem !important;
  }

  .table th {
    font-size: 0.875rem !important;
  }

  p {
    color: #8e8e8f !important;
  }

  .navbarwtg h6 {
    font-weight: 300;
    color: #8e8e8f;
  }

  .card-header {
background-color: #F5F5F5 ;
  }

  ::placeholder {
    color: #bbbbbc !important;
    opacity: 1;
  }

  :-ms-input-placeholder {
    color: #bbbbbc !important;
   }

   ::-ms-input-placeholder {
    color: #bbbbbc !important;
   }

   input:read-only {
    background-color: #f5f5f5 !important;
  }

   .input-group-text,
   .form-control{
    border: 1px solid #bbbbbc !important;
   }

   label.fav-button input[type="checkbox"],
   label.fav-button.heading input[type="checkbox"] {
    display: none;
  }

  .fav-button {
    margin-left: 2em;
    position: relative;
    cursor: pointer;
    padding-bottom: 1.3rem;
  }

  .fav-button.heading{
    margin-left: 2em;
    position: relative;
    cursor: pointer;
    padding-bottom: 1.6rem;
  }

  .fav-button .bi {
    color: gold;
    position: absolute;
    top: 0.4em;
    left: -1.25em;
    font-size: 1rem ;
  }

  .fav-button.heading .bi {
    color: gold;
    position: absolute;
    top: 0.4em;
    left: -1.25em;
    font-size: 1.5rem ;
  }

  .fav-button .bi-star,
  .fav-button.heading .bi-star {
    color: gray;
  }

  .fav-button .bi-star-fill,
  .fav-button.heading .bi-star-fill {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .fav-button input[type="checkbox"]:checked ~ .bi-star-fill,
  .fav-button.heading input[type="checkbox"]:checked ~ .bi-star-fill{
    opacity: 1;
  }

  .shadows {
    box-shadow: 0 .15rem 0.5rem 0 rgba(58, 59, 69, .15) !important;
  }

  /* table.dataTable .sorting,
  table.dataTable .sorting_asc{
    color: #38A3A5 ;
  } */

  div.dataTables_wrapper div.dataTables_info {
    font-size:0.875rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    font-size: 0.875rem;
  }

  .border {
    border: 1px solid #e7e7e7 !important;
  }

  .border-bottom {
    border-bottom: 1px solid #e7e7e7!important;
  }

  .border-left {
    border-left: 1px solid #e7e7e7!important;
  }

  .border-right {
    border-right: 1px solid #e7e7e7 !important;
  }

  .border-top {
    border-top: 1px solid #e7e7e7 !important;
  }

  .card {
        border: 1px solid #e7e7e7 !important;
  }

  .card-order {
    width:21% ;
    height:100% !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-bottom: 1rem;
  }

  @media (max-width:992px) {
    .card-order {
    width:50% ;
    }
  }

  @media (max-width:768px) {
    .card-order {
    width:100% ;
    }
  }

  @media (max-width:576px) {
    .card-order {
    width:100% ;
    }
  }

  .card-order-hover:hover{
    border: 1px solid #38A3A5 !important;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .wtgtextarea{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: auto;
    display: block;
    line-height: 25px;
    font-size: 0.9rem;
    padding: 1rem;
    border-radius: 0.7rem;
    border: 1px solid #bbbbbc;
    resize: none;
    outline: none;
}

input[type=file].wtginputbill {
    width: 300px;
    height:400px;
    color: transparent;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #a5a5a5;
  }

  input[type=file].wtginputbill::file-selector-button {
    margin-left: 100px;
      margin-right: 100px;
      margin-top: 150px;
    border: 1px solid #38A3A5;
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    color: #38A3A5;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
      content: "อัพโหลดรูปภาพ";
  }

  .chat-heading {
    border-bottom: 1px solid #e7e7e7;
    padding: 1.5rem;
    height:100px;
  }

  @media (max-height:768px) {
    .chat-heading {
    height: 80px;
    padding: 1.2rem;
    padding-left: 1.5rem;
    }

    h4{
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    span{
        font-size: 0.875rem;
    }
  }

  .chat-body {
    border-bottom: 1px solid #e7e7e7;
    padding: 1.5rem;
    overflow-y: auto;
    height: 74%;
  }

  @media (max-height:1080px) {
    .chat-body {
    height: 66%;
    }
  }

  @media (max-height:950px) {
    .chat-body {
    height: 61%;
    }
  }

  @media (max-height:900px) {
    .chat-body {
    height: 59%;
    }
  }

  @media (max-height:800px) {
    .chat-body {
    height: 54%;
    }
  }

  @media (max-height:768px) {
    .chat-body {
    height: 55%;
    }
  }

  @media (max-height:720px) {
    .chat-body {
    height: 51%;
    }
  }

  @media (max-height:680px) {
    .chat-body {
    height: 55%;
    }
  }

  .message-box  {
    padding: 1.5rem;
  }

  .message-box textarea.chat-box {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 80px;
    height: auto;
    max-height: 150px;
    display: block;
    line-height: 25px;
    font-size: 0.9rem;
    background-color: #fff;
    color: #1d1d1f;
    border: none;
    resize: none;
    outline: none;
  }

  .message-box textarea.chat-box::placeholder,
  .message-box textarea.chat-box:-ms-input-placeholder,
  .message-box textarea.chat-box::-ms-input-placeholder
   {
    color:#bbbbbc;
    font-weight:300;
  }

  .bubble {
    min-width: 10%;
    max-width:65%;

  }
  @media (max-width:1440px) {
    .bubble {
    max-width:60% ;
    }
  }

  @media (max-width:1280px) {
    .bubble {
    max-width:59% ;
    }
  }

  @media (max-width:992px) {
    .bubble {
    max-width:50% ;
    }
  }

  @media (max-width:768px) {
    .bubble {
    max-width:50% ;
    }
  }

  @media (max-width:576px) {
    .bubble {
    max-width:50% ;
    }
  }

  .bubble-box {
    display: inline-block;
    background-color: #f5f5f5;
    color: #1D1D1F;
    border-radius: 0.7rem;
    min-width: 10%;
    max-width: 100%;
    padding:0.5rem 1rem 0.5rem 1rem;
  }

  .wtgupload {
    color:#38A3A5 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
  }

  .card-mini-body{
    padding: 1rem 2rem;
    min-height: 1px;
    flex: 1 1 auto
  }

  .card-mini-footer{
    padding: 0.5rem 1rem;
  }

  .card-mini-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .info-box {
    height: 25px;
    border-bottom: 1px solid #e7e7e7;
  }

  .chat-menu {
    box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.10);
    padding-top: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    z-index: 1030;
  }

  .chat {
   height: 100vh;
  }

  .btn-order {
    border: 1px solid #e8e8e9;
    border-radius: 1.5rem;
    background-color: #fff !important;
    box-shadow: 0 0 3px #e8e8e9;
  }

  .btn-order:hover {
    border: 1px solid #299E00;
    border-radius: 1.5rem;
    background-color: #fff !important;
    box-shadow: 0 0 3px #6ca558;
  }

  .btn-createorder {
    border-radius: 3rem;
    background: #38A3A5;
    box-shadow: 0px 0px 10px 0px rgba(56, 163, 165, 0.50);
    color:white;
    padding: 0.5rem 2rem 0.2rem 2rem;
    font-weight: 300;
  }

  .btn-createorder:hover {
    background: #25DADD;
    box-shadow: 0px 0px 10px 0px #25DADD;
    color:white;
  }

  .btn-createorder img.icon-createorder {
    height: 2rem;
    padding-bottom: 0.3rem;
    width: auto;
    filter: invert(100%) sepia(1%) saturate(3043%) hue-rotate(350deg) brightness(104%) contrast(100%);
  }
  .btn-download {
    border-radius: 3rem;
    background: #38A3A5;
    box-shadow: 0px 0px 10px 0px rgba(56, 163, 165, 0.50);
    color:white;
    padding: 0.5rem 2rem 0.2rem 2rem;
    font-weight: 300;
  }

  .btn-download:hover {
    background: #25DADD;
    box-shadow: 0px 0px 10px 0px #25DADD;
    color:white;
  }

  .btn-download img.icon-download {
    height: 2rem;
    padding-bottom: 0.3rem;
    width: auto;
    filter: invert(100%) sepia(1%) saturate(3043%) hue-rotate(350deg) brightness(104%) contrast(100%);
  }

  .btn-blue {
    background-color: #047DED;
    color: #fff
  }

  .btn-blue:hover {
    background-color: #0569c7;
    color: #fff
  }

.wtgform .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }

.wtgform .input-group > .form-control + .form-control,
.wtgform .input-group > .form-control + .custom-select,
.wtgform .input-group > .form-control + .custom-file,
.wtgform .input-group > .form-control-plaintext + .form-control,
.wtgform .input-group > .form-control-plaintext + .custom-select,
.wtgform .input-group > .form-control-plaintext + .custom-file,
.wtgform .input-group > .custom-select + .form-control,
.wtgform .input-group > .custom-select + .custom-select,
.wtgform .input-group > .custom-select + .custom-file,
.wtgform .input-group > .custom-file + .form-control,
.wtgform .input-group > .custom-file + .custom-select,
.wtgform .input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

.wtgform .input-group > .form-control:focus,
.wtgform .input-group > .custom-select:focus,
.wtgform .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}

.wtgform .input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

.wtgform .input-group > .custom-file {
  display: flex;
  align-items: center;
}

.wtgform .input-group-prepend,
.wtgform .input-group-append {
  display: flex;
}

.wtgform .input-group-prepend .btn,
.wtgform .input-group-append .btn {
    position: absolute;
    z-index: 2;
    margin-left: -4.5rem;
    margin-top: 0.7rem;
}

.wtgform .input-group-prepend .btn:focus,
.wtgform .input-group-append .btn:focus {
  z-index: 3;
}

.wtgform .input-group-prepend .btn + .btn,
.wtgform .input-group-prepend .btn + .input-group-text,
.wtgform .input-group-prepend .input-group-text + .input-group-text,
.wtgform .input-group-prepend .input-group-text + .btn,
.wtgform .input-group-append .btn + .btn,
.wtgform .input-group-append .btn + .input-group-text,
.wtgform .input-group-append .input-group-text + .input-group-text,
.wtgform .input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

.wtgform .input-group-prepend {
  margin-right: -1px;
}

.wtgform .input-group-append {
  margin-left: -1px;
}

.wtgform label.wtglabel {
    z-index: 2;
  }

.wtgform .input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  text-align: center;
  white-space: nowrap;
  background-color: #eaecf4;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
}

.wtgform .input-group-text input[type="radio"],
.wtgform .input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.wtgform .input-group > .input-group-append > .btn,
.wtgform .input-group > .input-group-append > .input-group-text,
.wtgform .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.wtgform .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child),
.wtgform .input-group > .input-group-prepend:not(:first-child) > .btn,
.wtgform .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-radius: 0.7rem;
  }

.wtgform .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after,
.wtgform .input-group:not(.has-validation) > .custom-select:not(:last-child),
.wtgform .input-group:not(.has-validation) > .form-control:not(:last-child) {
    border-radius: 0.7rem;
  }

.wtgform .input-group > .custom-select:not(:first-child),
.wtgform .input-group > .form-control:not(:first-child) {
    border-radius: 0.7rem;
  }

  .dropdown-menu {
    z-index: 1000;
    display: none;
    float: left;
    padding: .5rem 0;
    margin: .125rem 0 0;
      margin-top: 0.125rem;
      margin-right: 0px;
    font-size: .85rem;
    color: #a5a5a5;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    border: 1px solid rgb(165, 165, 165);
    position: absolute;
    transform: translate3d(-162px, 0px, 0px);
    top: 0px;
    left: 0;
    will-change: transform;
    min-width: auto;
  }

  .pt-120{
    padding-top: 120px !important;
  }

  .pt-90{
    padding-top: 90px !important;
  }

 .mt-90{
    margin-top: 90px !important;
  }

  .page-no {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color:#a5a5a5;
  }

  .page-no:hover {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color:#38A3A5;
  }

  .page-no.active {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color:#fff;
    background-color: #38A3A5;
    border-radius: 0.7rem;
  }

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
    left: 20px!important;
}

a.wtg-link span.bg-activeday {
  background-color: #fff !important;
  color: #1d1d1f !important;
  font-size: 1rem ;
  border-radius: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 300;
  border: 1px solid #e8e8e9;
}

a.wtg-link:hover span.bg-activeday {
background-color: #1D1D1F !important;
color: #fff !important;
border-radius: 0.3rem;
border: 1px solid #1D1D1F;
}

a.wtg-link.active span.bg-activeday {
background-color: #1D1D1F !important;
color: #fff !important;
border-radius: 0.3rem;
border: 1px solid #1D1D1F;
}

.wtgform .select2-container {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 60px !important;
  display: block !important;
  line-height: 25px !important;
  font-size: 0.9rem !important;
  padding-top: 1.8rem !important;
  border-radius: 0.7rem !important;
  border: 1px solid #bbbbbc !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bbbbbc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e" );
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 14px auto;
  color: #8e8e8f !important;
}

.wtgform .select2-container .select2-selection--single {
  cursor: pointer;
  display: block;
  height: 28px;
  user-select: none;
  -webkit-user-select: none;
  background-color: transparent !important;
  color: #8e8e8f !important;
}

.wtgform .select2-container--default .select2-selection--single {
  border: 0 !important;
  padding-left: 0.25rem !important;
  background-color: transparent !important;
  color: #8e8e8f !important;
}

.wtgform .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none !important;
}

.wtgform .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #8e8e8f !important;
  line-height: 28px;
}

.task-heading {
  color: #1D1D1F !important;
}

.task-heading:hover {
  color: #38A3A5 !important;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #38A3A5;
  background-color: #fff;
  border: 1px solid #dddfeb;
}

.page-link:hover {
  z-index: 2;
  color: #38A3A5;
  text-decoration: none;
  background-color: #eaecf4;
  border-color: #dddfeb;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #38A3A5;
  border-color: #38A3A5;
}