@font-face {
    font-family: 'DBHelvethaicaX';
    src: url('../../../fonts/DBHelvethaicaX-55Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: url('../../../fonts/DBHelvethaicaX Med.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

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

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

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

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

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

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


@font-face {
    font-family: 'K2D';
    src: url('../../../fonts/K2D-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'K2D';
    src: url('../../../fonts/K2D-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'K2D';
    src: url('../../../fonts/K2D-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'K2D';
    src: url('../../../fonts/K2D-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


/* @font-face {
  font-family: 'Kanit-Light';
  src: url('../../../fonts/Kanit-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} */

.circle-header {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f05a";
    color: #fff;
    background: #0046AC;
    background-image: linear-gradient(to right, #0066CC, #003399);
    padding: 10px;
    border-radius: 50%;
    margin-right: 7px;display: inline-block;
    width: 48px;
    height: 48px;
    text-align: center;
}

/* -------------------------------------- globle style -------------------------------------- */

body {
    font-family: 'K2D';
    font-size: 16px;
}
/* * {
    font-family: 'K2D';
    font-size: 16px;
} */

body .font-cordia {
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
}

body .font-kanit {
    font-family: 'Kanit';
    font-size: 16px;
}

body .font-db {
    font-family: 'DBHelvethaicaX';
    font-size: 22px;
}

body .m0 {
    margin: 0px;
}

body .m5 {
    margin: 5px;
}

body .m10 {
    margin: 10px;
}

body .m15 {
    margin: 15px;
}

body .m20 {
    margin: 20px;
}

body .m25 {
    margin: 25px;
}

body .m30 {
    margin: 30px;
}

body .ml0 {
    margin-left: 0px;
}

body .ml5 {
    margin-left: 5px;
}

body .ml10 {
    margin-left: 10px;
}

body .ml15 {
    margin-left: 15px;
}

body .ml20 {
    margin-left: 20px;
}

body .ml25 {
    margin-left: 25px;
}

body .ml30 {
    margin-left: 30px;
}

body .mr0 {
    margin-right: 0px;
}

body .mr5 {
    margin-right: 5px;
}

body .mr10 {
    margin-right: 10px;
}

body .mr15 {
    margin-right: 15px;
}

body .mr20 {
    margin-right: 20px;
}

body .mr25 {
    margin-right: 25px;
}

body .mr30 {
    margin-right: 30px;
}

body .mt0 {
    margin-top: 0px;
}

body .mt5 {
    margin-top: 5px;
}

body .mt10 {
    margin-top: 10px;
}

body .mt15 {
    margin-top: 15px;
}

body .mt20 {
    margin-top: 20px;
}

body .mt25 {
    margin-top: 25px;
}

body .mt30 {
    margin-top: 30px;
}

body .mb0 {
    margin-bottom: 0px;
}

body .mb5 {
    margin-bottom: 5px;
}

body .mb10 {
    margin-bottom: 10px;
}

body .mb15 {
    margin-bottom: 15px;
}

body .mb20 {
    margin-bottom: 20px;
}

body .mb25 {
    margin-bottom: 25px;
}

body .mb30 {
    margin-bottom: 30px;
}

body .p0 {
    padding: 0px;
}

body .p5 {
    padding: 5px;
}

body .p10 {
    padding: 10px;
}

body .p15 {
    padding: 15px;
}

body .p20 {
    padding: 20px;
}

body .p25 {
    padding: 25px;
}

body .p30 {
    padding: 30px;
}

body .pl0 {
    padding-left: 0px;
}

body .pl5 {
    padding-left: 5px;
}

body .pl10 {
    padding-left: 10px;
}

body .pl15 {
    padding-left: 15px;
}

body .pl20 {
    padding-left: 20px;
}

body .pl25 {
    padding-left: 25px;
}

body .pl30 {
    padding-left: 30px;
}

body .pl35 {
    padding-left: 35px;
}

body .pl40 {
    padding-left: 40px;
}

body .pl45 {
    padding-left: 45px;
}

body .pl50 {
    padding-left: 50px;
}

body .pl85 {
    padding-left: 85px;
}

.pl64 {
    padding-left: 64px;
}

body .pl110 {
    padding-left: 110px;
}

body .pl120 {
    padding-left: 120px;
}

body .pr0 {
    padding-right: 0px;
}

body .pr5 {
    padding-right: 5px;
}

body .pr10 {
    padding-right: 10px;
}

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

body .pr20 {
    padding-right: 20px;
}

body .pr25 {
    padding-right: 25px;
}

body .pr30 {
    padding-right: 30px;
}

body .pt0 {
    padding-top: 0px;
}

body .pt5 {
    padding-top: 5px;
}

body .pt10 {
    padding-top: 10px;
}

body .pt15 {
    padding-top: 15px;
}

body .pt20 {
    padding-top: 20px;
}

body .pt25 {
    padding-top: 25px;
}

body .pt30 {
    padding-top: 30px;
}

body .pb0 {
    padding-bottom: 0px;
}

body .pb5 {
    padding-bottom: 5px;
}

body .pb10 {
    padding-bottom: 10px;
}

body .pb15 {
    padding-bottom: 15px;
}

body .pb20 {
    padding-bottom: 20px;
}

body .pb25 {
    padding-bottom: 25px;
}

body .pb30 {
    padding-bottom: 30px;
}

body .text-bold {
    font-weight: bold !important;
}

body .text-left {
    text-align: left !important;
}

body .text-right {
    text-align: right !important;
}


/* ---------------------------------- layout header style ---------------------------------- */

.navbar-nav.header-appname .nav-item {
    display: flex;
    padding-left: 15px;
}

.navbar-nav.header-appname .nav-item i {
    font-size: 20px;
    cursor: pointer;
}

.icon-header {
    font-size: 22px;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.text-header {
    font-size: 24px;
}

.navbar-light .navbar-nav h4 {
    margin-left: 15px;
    margin-bottom: 0px;
    font-size: 18px;
}

.navbar-light .nav-link {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.navbar-light .nav-link>img {
    margin-right: 0px !important;
    /* margin-left: 15px; */
    margin-left: 0px !important;
}

.navbar-light .nav-link>span.user-info {
    display: block;
    min-width: 80px;
    font-size: 12px;
}

.navbar-light .nav-link>span .text-secondary {
    font-size: 12px;
}

.navbar-light .nav-item.dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-light .nav-item.dropdown>a>i {
    font-size: 20px;
}

.navbar-light .nav-item.dropdown>a>span.badge {
    /* width: 20px;
    height: 20px; */
    width: 10px;
    height: 10px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5px;
    right: 10px;
}

.nav-item.dropdown.fullname a {
    padding-right: 0px;
}

/* ---------------------------------- layout sidebar style ---------------------------------- */

.sidebar .nav-item p {
    font-family: 'K2D';
    font-size: 15px;
    display: inline-block;
    width: calc(100% - 35px);
}

.sidebar .nav-link {
    padding: 0.5rem 0.5rem;
}
.sidebar .nav-item.active a.nav-link {
    color: #000;
}
.sidebar .nav-item .nav-link.nav-link-topic,
.sidebar .nav-item:hover .nav-link.nav-link-topic {
    background-color: rgb(22, 143, 130);
    color: #fff;
    cursor: normal;
}

/* ------------------------------------ breadcrumbs style ----------------------------------- */

.content-header .container-fluid .row div.col-md-6:nth-child(1) {
    padding-left: 15px;
    position: relative;
    top: 4px;
}

.content-header .breadcrumbs {
    line-height: 42px;
}

.content-header .breadcrumbs a,
.content-header .breadcrumbs span {
    font-family: 'Kanit';
    font-size: 16px;
}

.content-header>.container-fluid>.row>.col-md-6>h3,
.content-header>.container-fluid>.row>.col-md-12>h3 {
    margin-bottom: 0;
    padding-left: 15px;
}

.content-header>.container-fluid>.row>.col-md-6>h3>i,
.content-header>.container-fluid>.row>.col-md-12>h3>i {
    color: #0a214a;
}

.content-header>.container-fluid>.row>.col-md-6>h3>span,
.content-header>.container-fluid>.row>.col-md-12>h3>span {
    position: relative;
    top: 2px;
}

/* --------------------------------------- form style --------------------------------------- */

.form-title {
    font-size: 22px;
    margin-bottom: 25px;
}

.form-title em {
    font-size: 20px;
    color: #0a214a;
    background: #E3F1FD;
    padding: 5px;
    border-radius: 50%;
    margin-right: 7px;
}

.form-padding {
    margin-left: 50px;
}

form .card-body,
.form-horizontal .card-body {
    padding-top: 30px;
}

.form-group>label {
    font-family: 'K2D';
    font-size: 16px;
}

.card-body input,
.card-body textarea,
.card-body select,
.card-body select option,
.form-group input,
.form-group textarea,
.form-group select,
.form-group select option,
.form-group .divControl,
.form-group .divControl p.form-control-static,
.form-group .divControl p.form-control-static span {
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
}

.form-group .divControl p.form-control-static {
    margin-bottom: 0px;
}

.form-padding .form-group .divControl p.form-control-static.bg {
    background: #F2F2F2;
}

.form-padding .form-group .divControl p.form-control-static,
.form-padding .form-group>label {
    padding: 5px 15px;
    margin-bottom: 0px;
}

.form-control[readonly][data-provide="datepicker"] {
    background-color: unset;
}

.card-body select,
.form-group select {
    padding-top: 3px;
}

.form-group .divControl em.error {
    color: #ff0000;
    font-family: 'K2D';
    font-size: 13px;
    /* font-family: 'Cordia New'; */
    /* font-size: 20px; */
    padding-top: 5px;
    display: block;
}

.redstar {
    color: red;
    padding-left: 3px;
}

.text-muted {
    color: #20409A !important;
    font-family: 'K2D';
    font-size: 14px;
    /* font-family: 'Cordia New'; */
    /* font-size: 18px; */
    font-style: italic;
    margin-top: 5px;
}

.form-group .header-title-label {
    font-size: 17px;
    padding: 12px 15px;
    background-color: #0a214a;
    color: #fff;
    margin-bottom: 25px;
}

.form-group .control-label.title-label {
    font-size: 20px;
}

.form-group .control-label.title-label i {
    font-size: 22px;
    margin-right: 10px;
}

.form-group .control-label.labelRequest::after {
    content: '*';
    margin-left: 5px;
    color: #ff0000;
}

.form-group .control-label.with-icon::before {
    /* font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f05a"; */
    color: #0a214a;
    background: #E3F1FD;
    padding: 5px;
    border-radius: 50%;
    margin-right: 7px;
}

.pointer {
    cursor: pointer;
}

/* -------------------------------------- sweetalert --------------------------------------- */

.swal2-container .swal2-title {
    font-size: 22px;
    line-height: 1.6;
}

/* -------------------------------------- modal style --------------------------------------- */

.modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.modal-body::-webkit-scrollbar {
    width: 5px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #888;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.modal-header h4.modal-title i {
    margin-right: 10px;
    position: relative;
    top: 0px;
}

.modal-header .close span {
    font-size: 30px;
}

/* -------------------------------------- datepicker --------------------------------------- */


.datepicker.datepicker-dropdown.dropdown-menu .datepicker-switch,
.datepicker.datepicker-dropdown.dropdown-menu .dow,
.datepicker.datepicker-dropdown.dropdown-menu .day {
    /* font-family: 'Cordia New'; */
    /* font-size: 20px; */
    font-family: 'K2D';
    font-size: 14px;
}

/* -------------------------------------- jFiler style -------------------------------------- */

.jFiler-theme-default .jFiler-input-caption {
    padding-top: 4px !important;
}

.jFiler-theme-default .jFiler-input-caption span,
.jFiler-theme-default .jFiler-input-button {
    font-size: 13px;
}

.jFiler-items-default .jFiler-item .jFiler-item-others span.jFiler-item-status {
    display: block;
}

.jFiler-items-default .jFiler-item-assets {
    top: 25px !important;
    right: 10px !important;
    margin-top: 0 !important;
}

.jFiler-items-default .jFiler-item {
    padding: 15px;
}

.jFiler-items-default .jFiler-item .jFiler-item-icon .img-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: top;
}

.jFiler-items-default .jFiler-item .jFiler-item-title {
    max-width: calc(100% - 15px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------- jFiler display style -------------------------------------- */
.jFiler.jFiler-display {}
.jFiler.jFiler-display .jFiler-items-default .jFiler-item {margin-bottom: 5px; padding: 10px;}
.jFiler.jFiler-display .jFiler-item-inner {display: flex; gap: 15px;}

.jFiler.jFiler-display .jFiler-items-default .jFiler-item .jFiler-item-icon {margin-right: 0px; width: 80px;}
.jFiler.jFiler-display .jFiler-items-default .jFiler-item .jFiler-item-info {flex: 1;}

/* ------------------------------------ datatable style ------------------------------------- */

.dataTable {
    margin-top: 0px !important;
}

.dataTable tbody tr td,
.dataTable tbody tr td a {
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
    vertical-align: middle;
}

.dataTables_info {
    padding-top: 7px;
}

.dataTables_paginate .pagination {
    display: flex;
    justify-content: center !important;
    margin-top: 10px !important;
}

.dataTables_length {
    display: flex;
    justify-content: flex-end;
}

.dataTables_length label {
    margin-bottom: 0px;
    margin-top: 7px;
    display: flex;
    gap: 10px;
}

.dataTables_length select {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    top: -3px;
}

.dataTable th { border: 1px solid #dee2e6 !important; background: linear-gradient(#E6E6E6, #FFFFFF) !important; }
.dataTable td { border: 1px solid #dee2e6 !important; }
.dataTable tbody tr td, .dataTable tbody tr td a { padding: 0.5rem; }
.dataTable tbody tr td p { margin-bottom: 0px; }
.dataTable tbody tr:nth-child(even) td { background: #fafafa; }
.dataTable.tblData caption,
.tblData caption,
.dataTable caption {caption-side: top;background-color: #132E50; color: #fff; font-weight: bold; padding: 10px 15px;}
.dataTable + .bottom .page-item.active .page-link,
.dataTable.tblData + .bottom .page-item.active .page-link,
.tblData + .bottom .page-item.active .page-link {background-color: #415AA7; border-color: #415AA7; color: #fff;}
.dataTable + .bottom .page-item .page-link,
.dataTable.tblData + .bottom .page-item .page-link,
.tblData + .bottom .page-item .page-link {color: #415AA7;}

/* ------------------------------------- icheck style -------------------------------------- */

.icheck-primary label {
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
    font-weight: normal !important;
    color: #000;
}

/* ---------------------------------- default table style ---------------------------------- */

.tbl-default {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
    border-collapse: collapse;
}

.tbl-default thead tr th {
    padding: 12px 15px;
    border: solid 1px #ddd;
    background-color: #0a214a;
    color: #fff;
    text-align: center;
    font-weight: normal;
}

.tbl-default tbody tr td {
    padding: 7px 15px;
    border: solid 1px #ddd;
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
    vertical-align: top;
}

.tbl-default tbody tr td a {
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
    font-weight: normal;
}


/* -------------------------------------- other style --------------------------------------- */

.cordia-22 {
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
    /* vertical-align: middle; */
}

.kanit {
    font-family: 'Kanit';
    font-size: 16px;
}

.backblue-color {
    background-color: #0a214a;
}

.blue-color {
    color: #0a214a;
}

.backblue-light-color {
    background-color: #E3F4FF;
}

.backgray-color {
    background-color: #F2F2F2;
}

.p-15 {
    padding: 10px 15px;
}

.text-orange {
    border-radius: 24px;
    cursor: text;
    width: 200px;
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
}


.text-green {
    border-radius: 24px;
    cursor: text;
    width: 200px;
    font-family: 'K2D';
    font-size: 15px;
    /* font-family: 'Cordia New'; */
    /* font-size: 22px; */
}


.cursor-text {
    cursor: default;
}

.with-icon2::before {
    /* font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f05a";
  color: #0a214a;
  background: #E3F1FD;
  padding: 5px;
  border-radius: 50%;
  margin-right: 7px; */
}

.form-padding_editpage {
    margin-left: 25px;
}

.text-dot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kill-br {
    white-space: pre;
}

.upfile {
    display: inline-block;
    width: calc(100% - 35px);
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 5px;
}

#table_file .remove_file {
    cursor: pointer;
}

#table_file .del_file {
    position: relative;
    top: 3px;
}

/* .fullname {
  font-size: 13px;
}

.icon-header {
  font-size: 18px;
}

.text-header {
  padding-left: 20px;
}

.breadcrumbs {
  line-height: 2.3rem;
}

.thead-color {
  background-color: #f4f6f9;
}

.btn-rounded {
  border: 2px solid;
  border-radius: 40px;
  width: 100px;
  height: 38px;
  font-size: 15px;
}

.redstar {
  color: red;
  padding-left: 3px;
}

.custom {
  width: 120px !important;
}

.dataTables_length {
  float: right;
}

.dataTables_paginate {
  float: unset;
  display: inline-block;
  justify-content: center;
}

a {
  color: rgba(10, 33, 74, 1);
  text-decoration: none;
  background-color: transparent
}

.ico-sm {
  border-radius: 50%;
  border: 3px solid rgb(131 201 226);
  background: rgba(10, 33, 74, 1);
  color: white;
  width: 18px;
  height: 18px;
  font-size: 11px;
}

ul.a {
  list-style-type: none;
}

.calendar-button {
  background-color: #e9ecef;
} */


.sidebar .fa.fa-circle.nav-icon {
    font-size: 10px;
    width: 15px !important;
    margin-left: 7px;
    line-height: 25px;
    vertical-align: top;
}
.sidebar .nav-icon {
    line-height: 25px;
    vertical-align: top;
}
.nav-sidebar .nav-link > .right, .nav-sidebar .nav-link > p > .right {top: 1rem; right: 0.5rem;}

.card-body .navbar.bg-primary {
    padding: 15px 20px;
    background: linear-gradient(90deg, #0066CC, #003399);
}

.card-body .navbar.bg-primary h5 {
    margin: 0;
    font-size: 18px;
}

.card-body table.dataTable {
    margin-top: 0px !important;
}


.card .card-header {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 1rem 1.25rem;
}

.card .card-header h5 {
    font-size: 18px;
    margin-bottom: 0;
}

.card .card-header .h5 {
    font-size: 18px;
}

.text-white.btn-warning, .btn-rounded.btn-warning { background-color: #FF9900; border-color: #FF9900; }
.text-white.btn-success, .btn-rounded.btn-success { background-color: #07AF56; border-color: #07AF56; }
.text-white.btn-danger, .btn-rounded.btn-danger { background-color: #FF6666; border-color: #FF6666; }

.v-card.v-card--density-default { background: #fff; }
.v-card .v-card-title { border-bottom: solid 1px #eee; padding: 15px; }
.v-card-actions { border-top: solid 1px #eee; padding: 15px !important; }


/* form gen */
.custom-input-type-label {
    background-color: #3498db29
}

.button-side {
    position: fixed;
    top: 50%;
    right: 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: translateY(-50%);
}
.button-side .btn-draft {
    background-color: #0F75D0;
    border-color: #0F75D0;
}
.button-side .btn em {
    font-size: 32px;
    margin-bottom: 15px;
}
.button-side .btn {
    padding: 10px;
}