@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;1,100;1,200;1,300;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&family=Sarabun&display=swap');
body{
    color: #fff;
    border: none;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 400;
}
.text-danger {
    color: #e9292a!important;
}
.text-black {
    color: #474453!important;
}

body .btn-danger {
    color: #fff;
    background-color: #ff0001;
    border-color: #ff0001;
}
body .btn-danger:hover {
    color: #ff0001!important;
    background-color: #fff;
    border-color: #ff0001!important;
   text-shadow: none;
}
body .btn-black {
    color: #fff;
    background-color: #474453;
    border-color: #474453;
}
body .btn-black:hover {
    color: #474453!important;
    background-color: #fff;
    border-color: #474453!important;
   text-shadow: none;
}
body .btn-primary {
    color: #fff;
    background-color: #019aff;
    border-color: #019aff;
}
body .btn-primary:hover {
    color: #019aff!important;
    background-color: #fff;
    border-color: #019aff!important;
   text-shadow: none;
}
body .btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
body .btn-success:hover {
    color: #00c94a!important;
    background-color: #fff;
    border-color: #00c94a!important;
   text-shadow: none;
}
.with-shadow-success {
    box-shadow: 0 2px 4px 0 rgba(35,212,46,.5);
}

.info-bar {
    width: 100%;
    padding: 0 0 0 280px;
    position: fixed;
    left: 0;
    bottom: 0;
}
.confirm-bar {
    width: 100%;
    padding: 20px 58px 20px 50px;
    background: #fff;
    box-shadow: 0 -3px 8px 0 rgba(41,48,77,.1);
    font-size: 16px;
    font-weight: 600;
}
.bread-c a{
    text-decoration: none;
    color: #4f5664;
    opacity: .5;
    transition: opacity .2s;
}
.bread-c a:hover{
    opacity: .8;
}
.font-header{
        font-family: 'Kanit', sans-serif;
}
.header {
    height: 80px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
html .panel-black .panel-title {
    color: white;
}
.page-header {
    background: #575c66;
   /* background-image: linear-gradient(90deg,#3a3a3a 0,#0a0a0a);*/
/*   background-image: linear-gradient(90deg,#ca0101 0,#e84529);*/
    border-bottom: none;
    border-left: 1px solid #3a3a3a;
    box-shadow: 1px 3px 0 1px #cccccc;
    height: 80px;
    margin: -40px -40px 40px -40px;
    padding: 0;
}
.page-header .breadcrumbs {
    display: inline-block;
    font-size: 0;
    line-height: 99px;
    margin: 0;
    padding: 0;
}
.page-header h2 {
    color: #FFF;
    border-bottom: 4px solid #cccccc;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: inline-block;
    /* float: left; */
    height: 80px;
    font-size: 20px;
    font-size: 2rem;
    letter-spacing: normal;
    line-height: 99px;
    margin: 0 0 0 -1px;
    padding: 0 22px 0 20px;
}
.mb-0{
	margin-bottom: 0px !important;
}
.mt-0{
	margin-top: 0px !important;
}

.iconsize{
    font-size: 26px;
}
.bg-danger{
    background: #ff0800!important;
}

.alert-danger {
    background-color: #e9292a !important;
    border-color: #e9292a !important;
    color: #ffffff !important;
}

.alert-success{
    background-color: #00b90e !important;
    border-color: #00b90e !important;
    color: #ffffff !important;
}

.right-wrapper{
    margin-right: 20px;
}
.header-right {
    float: right;
    height: 67px;
}
ul.nav-main li a {
    font-size:14px;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.userbox .name {
    color: #000011;
    font-size: 1.8rem;
    line-height: 1.6em;
    font-family: 'Kanit', sans-serif;
}
.userbox .profile-picture img {
    width: 45px;
    color: transparent;
}
ul.nav-main > li > a {
    padding: 16px 25px;
}
.nav > li {
   font-size:14px;
}
.sub-footer{
    padding:10px;
    color:#fff;
    background: #ff0800!important;
    text-align: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.sub-footer:hover{
    padding:10px;
    color:#ff0800!important;
    background: #fff!important;
    text-align: center;
}
.content-body {
    padding: 50px 20px 27px;
}

@media only screen and (max-width: 767px){
.content-body {
    padding: 64px 10px 27px;
}
}

@media only screen and (min-width: 768px){
html.fixed .sidebar-left {
    bottom: 0;
    left: 0;
    padding-bottom: 50px;
    position: fixed;
    top: 80px;
}
}
@media (max-width:736px) {
html.no-overflowscrolling .nano > .nano-content {
    bottom: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 63px;
}
}

@media (max-width:736px) {
.form-group label{
  font-size: 8pt !important;
}
.form-group input{
  font-size: 8pt !important;
}
.panel-body{
  padding: 8px !important;
}
.btn-lg, .btn-group-lg > .btn {
    padding: 7px 11px;
    font-size: 12px;
    line-height: 1.33;
    border-radius: 6px;
}
}

.notifications .notification-menu .content {
     padding: 0px; 
}

.notifications .notification-menu {
    border: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    left: auto;
    margin: 10px 0 0 0;
    padding: 0;
    right: -5px;
    width: 400px;
}

.notification-menu a {
    padding:8px;
}

.notifications .notification-menu .notification-title {
    background: #b60304;
    border-radius: 3px 3px 0 0;
    color: white;
    font-size: 11px;
    font-size: 2rem;
    line-height: 15px;
    line-height: 1.5rem;
    padding: 20px;
    text-transform: uppercase;
}

.notifications > li .notification-icon {
    height: 60px;
    width: 60px;
}
.notifications > li .notification-icon i {
    color: #000;
    line-height: 62px;
    vertical-align: middle;
    font-size: 20px;
}
.notifications > li .notification-icon .badge {
    background: #f02849;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    height: 24px;
    padding: 3px 5px 3px 5px;
    position: absolute;
    right: -8px;
    top: -3px;
    font-weight: bold;
    line-height: 2;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
@media (max-width:736px) {
.notifications > li .notification-icon {
    height: 35px;
    width: 35px;
}
.notifications > li .notification-icon i {
    color: #000;
    line-height: 34px;
    vertical-align: middle;
    font-size: 14px;
}
.notifications > li .notification-icon .badge {
     background: #f02849;
    color: #FFF;
    font-size: 10px;
    font-weight: normal;
    height: 25px;
    width: 25px;
    padding: 3px 5px 3px 5px;
    position: absolute;
    right: -8px;
    top: -17px;
    border-radius: 1;
    line-height: 1.5;
}
}

.sidebar-left {
    box-shadow: -5px 0 0 #f02849bf inset;
}

.menu_header_center {
    position: fixed;
    top: 25px;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    background: transparent;
    z-index: 99;
    text-align: center;
    color: white;
    font-weight: bolder;
    font-style: italic;
    font-size: 20px;
    text-transform: uppercase;
}

@media (max-width:736px) {
.menu_header_center {
    position: fixed;
    top: 15px;
    left: 60%;
    width: 310px;
    margin-left: -200px;
    background: transparent;
    z-index: 99;
    text-align: center;
    color: white;
    font-weight: bolder;
    font-style: italic;
    font-size: 15px;
    text-transform: uppercase;
}
}

.bell-b{
   padding:6px;
}
.bell-b:hover {
    background: #cccccc !important;
    color: #fff;
}

.panel-danger {
    border-left: 1px solid #d2322d;
}
.panel-black {
    border-left: 1px solid #474453;
}
.text-header{
    font-weight: bold;
    font-size: 16px;
}

.d-none{
    display: none;
}

.text-cus1{
    color: #4f5664;
}

.sidebar-left {
    width: 250px;
}
@media only screen and (min-width: 768px){
html.fixed .content-body {
    margin-left: 250px;
}
}
@media only screen and (min-width: 768px){
html.fixed .page-header {
    left: 250px;
    margin: 0;
    position: fixed;
    right: 0;
    top: 60px;
}
}

.noti_btn .message{
    color: #000;
}

.sidebar-left {
  /*      background: #e74424;*/
}
ul.nav-main > li.nav-active > a {
    box-shadow: 2px 0 0 #ffffff inset;
}

.userbox.open .dropdown-menu a:hover{
    background-image: linear-gradient(90deg,#ca0101 0,#730202);
    color: #fff;
}

.notification-menu li {
    margin: 0 0 0px;
}
.btn-best{
    background: linear-gradient(90deg,#ca0101 0,#730202);
    padding:8px;
    text-align:center;
    color:#fff;
    box-shadow: 1px 3px 0 1px #cccccc;
}
.btn-best:hover{
    background: #fff;
    color:#e9292a;
    padding:8px;
    text-align:center;
}
.panel{
 /*   box-shadow: 0 1px 19px rgba(0,0,0,.1);*/
}
.panel-warning > .panel-heading {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #ff8502;
}
.panel-heading{
    background: #eee;
}
html .panel-warning .panel-heading {
    background: #ff8502;
}
html .panel-danger .panel-heading {
    background: #cc0600;
}
html .panel-black .panel-heading {
    background: #474453;
}
.panel-warning {
    border-left: 1px solid #fe8401 !important;
}
html .panel-success .panel-heading {
    background: #17b317;
}
.panel-success {
    border-left: 1px solid #17b317 !important;
}

.notifications .notification-menu:before, .notifications .notification-icon:before {
    border-bottom-color: #b60506;
}

.select2-container .select2-choice {
    display: block;
    height: 36px;
}

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 0;
    color: #fe0a04;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #dddddd;
    color: #21272c;
}

.header-form{
    font-size: 18px;
    font-family: 'Kanit', sans-serif;
}

.panel-title{
    font-size: 18px;
    font-family: 'Kanit', sans-serif;
    font-weight: 500 !important;
}
.table.mb-none {
    margin-bottom: 0 !important;
    font-size: 14px;
    font-family: 'Kanit', sans-serif;
}
table.table > tbody{
    font-weight: 300;
}
.dataTables_wrapper .datatables-footer .dataTables_info {
    font-size: 14px;
    padding-top: 0;
    margin-top: 6px;
    color: red;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    height: 32px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    height: 32px;
}


body .btn-info {
    color: #fff;
    background-color: #0386dc;
    border-color: #0386dc;
}

body .btn-info:hover {
    color: #0386dc!important;
    background-color: #fff;
    border-color: #0386dc!important;
   text-shadow: none;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    line-height: 2.8;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td > .lebel {
    line-height: 2.8;
}
.label{
    font-size:12px;
    line-height: 2.8;
}
ul.nav-main li .nav-children li a {
    padding: 6px 15px 7px 40px;
    overflow: hidden;
    line-height: 1.9;
}
@media only screen and (max-width: 767px){
.userbox {
    float: left;
    margin: 7px 0 0 12px;
    position: relative;
}
}

.navbar-text {
    margin-top: 0px;
}
@media (min-width: 768px){
.navbar-text {
    margin-left: 0px;
}
}
.fa-chevron-left:before {
    content: "\f053";
    line-height: 1.5;
}
.fa-chevron-right:before {
    content: "\f054";
    line-height: 1.5;
}

.dataTables_wrapper .DTTT.btn-group {
    display: none !important;
}
.panel-title {
    color: #545454;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    padding: 0;
    text-transform: none;
}

.fa-x{
    font-size: 1.8em;
}

.label-table{
    background: #e20002 !important;
}


body .btn-edit-color {
    color: #fff;
    background-color: #ff6718;
    border-color: #ff6718;
}

body .btn-edit-color:hover {
    color: #ff6718!important;
    background-color: #fff;
    border-color: #ff6718!important;
   text-shadow: none;
}

body .btn-dark {
    color: #fff;
    background-color: #595959;
    border-color: #595959;
}

body .btn-dark:hover {
    color: #595959!important;
    background-color: #fff;
    border-color: #ff6718!important;
   text-shadow: none;
}

body .btn-cancel-color {
    color: #fff;
    background-color: #888888;
    border-color: #888888;
}

body .btn-cancel-color:hover {
    color: #fff!important;
    background-color: black;
    border-color: #888888!important;
   text-shadow: none;
}


body .btn-insert {
    color: #fff;
    background-color: #00c94a;
    border-color: #00c94a;
}

body .btn-insert:hover {
    color: #00c94a!important;
    background-color: #fff;
    border-color: #00c94a!important;
   text-shadow: none;
}

.search-results-list {
    max-width: 100%;
}
.form-bordered .form-group {
    color: black;
}

/*upload css*/


span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content span i {
  font-size: 30px;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
    background: rgb(255 0 1 / 76%);
    color: white;
    display: table;
    /* height: 150px; */
    left: 20px;
    position: absolute;
    top: 0;
    width: 60%;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    /* display: none; */
}

.img-success {
    border: 1px solid #01b704 !important;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(70,136,71,0.9);
    -moz-box-shadow: 0px 0px 5px 0px rgba(70,136,71,0.9);
    box-shadow: 0px 0px 5px 0px rgb(1 183 4);
}
.widget-twitter-profile {
    background-color: #0088cc;
    background-image: linear-gradient(90deg,#ca0101 0,#730202);
    border-radius: 15px;
    box-shadow: 0 1px 8px rgb(71 68 83 / 38%);
}

.progress .progress-bar-danger {
    background-color: #d2322d;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    box-shadow: 0 1px 8px rgb(255 0 0 / 62%);
}

.widget-twitter-profile .profile-info {
    background-image: linear-gradient(90deg,#fdfdfd 0,#ecedf0);
}

.widget-twitter-profile .profile-info .name {
    color: #474453;
}
.widget-twitter-profile .profile-info .account {
    color: #474453 !important;
}

ul.nav-main li .nav-children li.nav-active > a {
    color: #fb3f3f;
    /* box-shadow: 2px 0 0 #ffffff inset; */
}
ul.nav-main li .nav-children li > a:hover {
    color: #fb3f3f !important;
}
/*chart*/

.noti_btn span >.date{
    float:right;
    color: #000;
}

ul.messagesList li {
    background: #fdf3f3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 30px !important;
}
ul.messagesList li:nth-child(odd) {
    background: #fff !important;
}

ul.messagesList li p.title {
    display: inline-block;
    width: 25%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
ul.messagesList li p.title {
    display: inline-block;
    width: 55%;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-size: 14px;
}

.radio-f{
    background: red !important;
    padding: 8px !important;
    color: #fdfdfd !important;
    width: 100%;
    text-align: center !important;
}
.radio-s{
    background: #17b317 !important;
    padding: 8px !important;
    color: #fdfdfd !important;
    width: 100%;
    text-align: center !important;
}
.search-results-list .result-thumb img, .search-results-list .result-thumb .fa {
    height: auto;
    width: 100px;
}
.search-results-list a .title {
    margin-top: 0;
    font-size: 1.4rem;
}
.search-results-list a .description {
    color: #777;
    font-size: 1.5rem;
    font-family: 'Kanit', sans-serif;
    font-weight: bold;
}
.search-results-list li {
    border-bottom: 1px solid #EEE;
    margin-bottom: 15px;
    padding-bottom: 0px;
    position: relative;
}
.search-results-list .result-type {
    right: 5px;
    position: absolute;
    font-size: 10px;
    line-height: 2.8;
    top: 5px;
}

@media (max-width: 768px){
.search-results-list .result-type{
    position: initial;
}
}

.search-results-list {
    max-width: 100%;
    padding-bottom: 40px;
}

.label-warning {
    background: #ff8502;
    color: white;
}
@media (max-width:812px) {
   .bread-c{
    font-size:9pt !important;
} 
}

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}

.maindata th{
   line-height:1.2 !important;
   font-weight:500;
   text-align:center;
}



/*-- MODAL --*/
.fade {
    /*transition: opacity 0.15s linear;*/
    transition: opacity 0.10s linear;
}
.modal.rightbook .modal-dialog {
  position: fixed;
  margin: auto;
  width: 45%;
  height: 100%;
  max-width: 100%;
  transform: translate3d(0%, 0, 0);
  font-family: 'Kanit', sans-serif;
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.modal.rightbook .modal-dialog {
  width: 60%;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
.modal.rightbook .modal-dialog {
  width: 60%;
}
}
@media (max-width: 912px){
.modal.rightbook .modal-dialog {
    width: 100%;
}
}
.modal.rightbook .modal-content {
  height: 100%;
  overflow-y: auto;
  border-radius:0px!important;
  border: 0px solid rgba(0, 0, 0, 0.2);
}

.modal.rightbook.fade .modal-dialog {
  right: 0px;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.rightbook.fade.show .modal-dialog {
  right: 0;
}

.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 40%;
  height: 100%;
  max-width: 100%;
  transform: translate3d(0%, 0, 0);
}
@media (min-width: 576px){
.modal.right .modal-dialog {
    max-width: 560px;
}
}

.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
  border-radius:0px!important;
  border: 0px solid rgba(0, 0, 0, 0.2);
}

.modal.right .modal-body {
  padding: 15px 15px;
}

.modal.right.fade .modal-dialog {
  right: -500px;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
  right: 0;
}
.modal.right.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    min-height: 16.42857143px;
    background-color: #e9292a;
    border-radius: 0!important;
    position: fixed;
    width: 100%;
    z-index: 2000;
}
.modal-body{
    margin-top:66px !important;
}
.modal-title {
    width: 100%;
    text-align: center;
    color: #fff;
}
.modal-header .close {
    margin-top: -2px;
    color: #fff;
    margin: -4rem -0.7rem -1rem auto;
    display: block;
    font-size: 4rem;
    opacity: inherit;
}
.passrow{
    padding: 15px;
    margin: 0;
    -webkit-box-shadow: 0 1px 16px rgb(0 0 0 / 10%);
    box-shadow: 0 1px 16px rgb(0 0 0 / 10%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),to(#fdfdfd));
    background-image: linear-gradient(180deg,#fff 50%,#fdfdfd);
}

.table > thead:first-child > tr:first-child > th{
 vertical-align: middle !important;
 font-weight:bold;
}

.bell-not{
    background: #c7c7c7;
    border-radius:50%;
    padding:16px;
    font-size: 20px;
}
@media (max-width: 912px){
    .bell-not{
    float: right;
    margin-right: 11px;
}
}

.modal-content{
    font-family: 'Kanit', sans-serif;
}

.panel-heading.bg-primary {
    background: #007bff !important;
}

.bg-primary {
    background: #007bff !important;
}

.nav-tabs li.active a{
        background: white;
    border-left-color: #eeeeee;
    border-right-color: #eeeeee;
    border-top: 3px solid #ff6900;
    color: #ff6901;
    text-shadow: 0 0 transparent;
}
.nav-tabs li a{
    font-size: 1.5rem;
}
.nav-tabs li.active a:hover ,.nav-tabs li.active a:focus{
   background: white;
    border-left-color: #eeeeee;
    border-right-color: #eeeeee;
    border-top: 3px solid #ff6900;
    color: #ff6901;
    text-shadow: 0 0 transparent;
}

body .btn-success {
    text-shadow: none !important;
}

