@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;1,200&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');

.kanit, .Kanit {
    font-family: "Kanit" !important;
}

.sarabun, .Sarabun {
    font-family: "Sarabun" !important;
}

.card-title, th, h1, h2, h3, .btn, .menu-title, .nav-link, .navbar-dropdown a, .page-title, .input-group-text, select {
    font-family: "Kanit" !important;
}
.f256605080441 {
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 20px;
    justify-content: space-between;
    flex-direction: column;
    height: 230px;
    display: flex;
}

    .f256605080441 .b0443 {
        position: absolute;
        left: 50%; 
        bottom: 14px; 
        transform: translateX(-50%); 
    }

.f256605071541 .td1 {
    display: table-cell;
    width: 55px;
    font-family: "Sarabun", Times, serif;
    font-size: 13px;
    color: #1e1e1e;
    font-weight: 600;
}

.f256605071541 .a256605080508 {
    letter-spacing: unset !important;
    line-height: 0.5em !important;
    text-transform: none !important;
}

.f256605071541 .td2 {
    display: table-cell;
    font-family: "Sarabun", Times, serif;
    font-size: 13px;
    color: #1e1e1e;
    font-weight: 400;
}

.f256605071541 div {
    border-bottom: solid 1px rgb(204 204 204 / 0.24);
    padding-top: 2px;
    padding-bottom: 2px;
}

.i256605080708 * {
    font-family: "Sarabun", Times, serif;
    color: #1e1e1e;
    font-weight: 400;
}

.btn-primary:hover {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    transform: translateY(-5px);
}

.time-ago {
    font-family: "Kanit", Times, serif;
    color: #686868;
    font-weight: 200;
}

body {
    font-family: "Sarabun", Times, serif;
    color: #1e1e1e;
    font-weight: 200;
}

.card-title a {
    margin-bottom: 5px;
    font-weight: 600;
    font-family: "Kanit" !important;
}

td {
    font-family: "Sarabun", Times, serif;
    color: #1e1e1e;
    font-weight: 400;
    font-size: 14px !important;
}

label {
    margin-bottom: 5px;
    font-weight: 600;
    font-family: "Kanit" !important;
}

.aside-nav .label {
    color: #a1a2a6;
    font-weight: 400;
    font-family: "Kanit" !important;
}

.nav-item, .nav-item a, .nav-item p {
    font-family: "Kanit" !important;
    color: #686868 !important;
    font-size: 13px;
}

.title {
    font-weight: 400;
    font-family: "Kanit" !important;
}

.display-block {
    display: block;
}

.dropdown-item {
    font-family: "Kanit", Times, serif;
    color: #686868 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em;
}

.swal-title {
    color: rgba(0,0,0,.65);
    font-weight: 600;
    text-transform: none;
    position: relative;
    display: block;
    padding: 13px 16px;
    font-size: 24px;
    line-height: normal;
    text-align: center;
    margin-bottom: 0;
}

.main-header .nav-bottom .page-navigation > .nav-item > .nav-link {
    padding: 10px !important;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.btn i {
    margin-right: 5px
}

.btn {
    font-family: "Kanit" !important;
    font-weight: 500;
    letter-spacing: 0.05em;
}


td strong {
    font-family: "Kanit" !important;
    font-weight: 400;
}

td a strong {
    font-family: "Kanit" !important;
    font-weight: 400;
    color: #252526;
}

.pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.swal-title, .swal-text, .swal-footer {
    font-family: "Kanit" !important;
    font-weight: 400;
    color: #252526;
}

table.dataTable {
    clear: both;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    max-width: none !important;
    border-collapse: collapse !important;
}

.dropdown-menu i {
    margin-right: 5px
}

.card-category {
    font-family: "Kanit" !important;
    font-weight: 100;
}
/*.card-title{font-family: "Kanit" !important;}*/
.btn-light {
    background: #ffffff !important;
    border-color: #ccc;
}

.cut-text-m-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Kanit" !important;
    font-weight: 100;
}

.cut-text-m-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar_minimize .sidebar .scroll-wrapper .sidebar-wrapper .sidebar-content .nav .dis_none {
    display: none
}

.sidebar_minimize.sidebar_minimize_hover .sidebar .scroll-wrapper .sidebar-wrapper .sidebar-content .nav .dis_none {
    display: block
}

#search-nav {
    flex: 1;
    max-width: unset;
    transition: all .4s;
}

A:link {
    text-decoration: none;
}

A:visited {
    text-decoration: none;
}

th {
    font-family: "Kanit" !important;
    font-weight: 500 !important;
}

td h5 {
    font-family: "Kanit" !important;
    font-weight: 500 !important;
}

.tb_300325661425 {
    width: 100%;
    border: solid 1px #686868;
}

.td_300325661425_1 {
    width: 150px
}

.td_300325661425_2 {
    width: 150px
}

.td_300325661425_3 {
    width: 150px
}

.td_300325661425_4 {
    width: 150px
}

.td_300325661425 {
    padding: 5px
}

.mn256605031110 {
    font-family: "Kanit" !important;
    font-weight: 100 !important;
    color: #252526;
}

td .avatar {
    width: 2.5rem;
    height: 2.5rem;
}

td .lg .avatar {
    width: 3rem !important;
    height: 3rem !important;
}

td .avatar .rounded-circle {
    background-color: #48abf7;
}

td .avatar.wh {
    width: 30px;
    height: 30px;
    margin-top: 5px;
}

.text-success-2 {
    color: #00b900
}

.table td, .table th {
    font-size: 14px;
    border-top-width: 0px;
    border-bottom: 1px solid;
    border-color: #ebedf2 !important;
    padding: 15px 5px !important;
    height: 60px;
    vertical-align: middle !important;
}

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

/*        .modal-header {
    background: rgb(34,87,126);
    background: linear-gradient(90deg, rgba(34,87,126,1) 0%, rgba(24,61,88,1) 52%, rgba(0,212,255,1) 96%);
}*/

.modal-title {
    color: #ffffff;
    font-family: "Kanit" !important;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.08em;
}

.modal-header .close {
    font-size: 28px !important;
    color: #22567c;
}

.modal-title small {
    display: block !important;
    margin-top: 5px;
    font-family: "Sarabun", Times, serif;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px !important;
}

.description .breadcrumbs {
    list-style: none;
    display: inline;
    width: auto;
    border-left: 0px solid #efefef;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    height: 100%;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
    border: solid 1px rgba(24,61,88,1);
    background-color: rgb(255 255 255 / 0.5);
    text-align: center;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 75px;
    display: inline-block;
    border: solid 1px rgba(24,61,88,1);
    background-color: rgb(255 255 255 / 0.5);
    text-align: center;
}

.form-group-default label:not(.error) {
    font-size: 11px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 400;
    color: #c1c1c1;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    color: #555;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 30px;
    cursor: default;
    float: left;
    margin: 5px 0 0 6px;
    font-size: 12px;
    padding: 3px 23px 3px 10px;
    position: relative;
    font-weight: 600;
    font-family: "Kanit" !important;
}

.aside-nav .form-group-default {
    background-color: transparent !important
}

.st_al_w {
    text-decoration: line-through;
    color: #f97b22
}

.st_al_z td {
    font-weight: 600;
}

.none {
    display: none;
}

.row256605020630 {
    font-weight: 300;
    font-family: "Kanit" !important;
    color: #252526;
    /* border-bottom: solid  1px rgb(184 184 184 / 0.24);*/
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #1e1e1e !important;
    padding: 0;
    font-weight: bold;
    width: 100%;
}

@media screen and (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}

.content_1 ul li {
    background-repeat: no-repeat;
    background-position: 2px 7px;
    background-size: 13px 13px;
    padding: 4px 0px;
}

    .content_1 ul li::marker {
        display: none;
        unicode-bidi: unset;
        font-variant-numeric: unset;
        text-transform: none;
        text-indent: unset !important;
        text-align: unset !important;
        text-align-last: unset !important;
    }

.apply_1 {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    background-color: #6861ce;
    padding: 30px;
    border-radius: 6px;
    transition: 0.3s;
}

    .apply_1:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.30);
    }

    .wp-0 {
        width: 0% !important;
    }
    
    .wp-1 {
        width: 1% !important;
    }
    
    .wp-2 {
        width: 2% !important;
    }
    
    .wp-3 {
        width: 3% !important;
    }
    
    .wp-4 {
        width: 4% !important;
    }
    
    .wp-5 {
        width: 5% !important;
    }
    
    .wp-6 {
        width: 6% !important;
    }
    
    .wp-7 {
        width: 7% !important;
    }
    
    .wp-8 {
        width: 8% !important;
    }
    
    .wp-9 {
        width: 9% !important;
    }
    
    .wp-10 {
        width: 10% !important;
    }
    
    .wp-11 {
        width: 11% !important;
    }
    
    .wp-12 {
        width: 12% !important;
    }
    
    .wp-13 {
        width: 13% !important;
    }
    
    .wp-14 {
        width: 14% !important;
    }
    
    .wp-15 {
        width: 15% !important;
    }
    
    .wp-16 {
        width: 16% !important;
    }
    
    .wp-17 {
        width: 17% !important;
    }
    
    .wp-18 {
        width: 18% !important;
    }
    
    .wp-19 {
        width: 19% !important;
    }
    
    .wp-20 {
        width: 20% !important;
    }
    
    .wp-21 {
        width: 21% !important;
    }
    
    .wp-22 {
        width: 22% !important;
    }
    
    .wp-23 {
        width: 23% !important;
    }
    
    .wp-24 {
        width: 24% !important;
    }
    
    .wp-25 {
        width: 25% !important;
    }
    
    .wp-26 {
        width: 26% !important;
    }
    
    .wp-27 {
        width: 27% !important;
    }
    
    .wp-28 {
        width: 28% !important;
    }
    
    .wp-29 {
        width: 29% !important;
    }
    
    .wp-30 {
        width: 30% !important;
    }
    
    .wp-31 {
        width: 31% !important;
    }
    
    .wp-32 {
        width: 32% !important;
    }
    
    .wp-33 {
        width: 33% !important;
    }
    
    .wp-34 {
        width: 34% !important;
    }
    
    .wp-35 {
        width: 35% !important;
    }
    
    .wp-36 {
        width: 36% !important;
    }
    
    .wp-37 {
        width: 37% !important;
    }
    
    .wp-38 {
        width: 38% !important;
    }
    
    .wp-39 {
        width: 39% !important;
    }
    
    .wp-40 {
        width: 40% !important;
    }
    
    .wp-41 {
        width: 41% !important;
    }
    
    .wp-42 {
        width: 42% !important;
    }
    
    .wp-43 {
        width: 43% !important;
    }
    
    .wp-44 {
        width: 44% !important;
    }
    
    .wp-45 {
        width: 45% !important;
    }
    
    .wp-46 {
        width: 46% !important;
    }
    
    .wp-47 {
        width: 47% !important;
    }
    
    .wp-48 {
        width: 48% !important;
    }
    
    .wp-49 {
        width: 49% !important;
    }
    
    .wp-50 {
        width: 50% !important;
    }
    
    .wp-51 {
        width: 51% !important;
    }
    
    .wp-52 {
        width: 52% !important;
    }
    
    .wp-53 {
        width: 53% !important;
    }
    
    .wp-54 {
        width: 54% !important;
    }
    
    .wp-55 {
        width: 55% !important;
    }
    
    .wp-56 {
        width: 56% !important;
    }
    
    .wp-57 {
        width: 57% !important;
    }
    
    .wp-58 {
        width: 58% !important;
    }
    
    .wp-59 {
        width: 59% !important;
    }
    
    .wp-60 {
        width: 60% !important;
    }
    
    .wp-61 {
        width: 61% !important;
    }
    
    .wp-62 {
        width: 62% !important;
    }
    
    .wp-63 {
        width: 63% !important;
    }
    
    .wp-64 {
        width: 64% !important;
    }
    
    .wp-65 {
        width: 65% !important;
    }
    
    .wp-66 {
        width: 66% !important;
    }
    
    .wp-67 {
        width: 67% !important;
    }
    
    .wp-68 {
        width: 68% !important;
    }
    
    .wp-69 {
        width: 69% !important;
    }
    
    .wp-70 {
        width: 70% !important;
    }
    
    .wp-71 {
        width: 71% !important;
    }
    
    .wp-72 {
        width: 72% !important;
    }
    
    .wp-73 {
        width: 73% !important;
    }
    
    .wp-74 {
        width: 74% !important;
    }
    
    .wp-75 {
        width: 75% !important;
    }
    
    .wp-76 {
        width: 76% !important;
    }
    
    .wp-77 {
        width: 77% !important;
    }
    
    .wp-78 {
        width: 78% !important;
    }
    
    .wp-79 {
        width: 79% !important;
    }
    
    .wp-80 {
        width: 80% !important;
    }
    
    .wp-81 {
        width: 81% !important;
    }
    
    .wp-82 {
        width: 82% !important;
    }
    
    .wp-83 {
        width: 83% !important;
    }
    
    .wp-84 {
        width: 84% !important;
    }
    
    .wp-85 {
        width: 85% !important;
    }
    
    .wp-86 {
        width: 86% !important;
    }
    
    .wp-87 {
        width: 87% !important;
    }
    
    .wp-88 {
        width: 88% !important;
    }
    
    .wp-89 {
        width: 89% !important;
    }
    
    .wp-90 {
        width: 90% !important;
    }
    
    .wp-91 {
        width: 91% !important;
    }
    
    .wp-92 {
        width: 92% !important;
    }
    
    .wp-93 {
        width: 93% !important;
    }
    
    .wp-94 {
        width: 94% !important;
    }
    
    .wp-95 {
        width: 95% !important;
    }
    
    .wp-96 {
        width: 96% !important;
    }
    
    .wp-97 {
        width: 97% !important;
    }
    
    .wp-98 {
        width: 98% !important;
    }
    
    .wp-99 {
        width: 99% !important;
    }
    
    .wp-100 {
        width: 100% !important;
    }
    
    .set_h_bg {
        padding-top: 160px;
        padding-bottom: 40px;
    }
    
    @media (max-width: 769px) {
        .h_set {
            font-size: 20px;
        }
    
        .set_h_bg {
            padding-top: 40px;
            padding-bottom: 40px;
            text-align: center
        }
    
        .img-res-256605200537 {
            width: 100% !important;
            margin: auto;
            display: block;
            border-radius: 5px
        }
    }
    
    .img-res-256605200537 {
        width: 70%;
        margin: auto;
        display: block;
        border-radius: 5px
    }
    .modal001 {
        display: none;
        position: fixed;
        z-index: 99999999999999999999999999999;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }
    .img-display {
        display: inline-block;
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 50%;
        margin: 10px
    }
    
        .img-display img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }
    
    .bg_col:hover {
        border-radius: 6px;
        background-color: rgb(240, 242, 245);
    }
    
    .bg_col.c_chk {
        border-radius: 6px;
        background-color: #1572E8;
        color: #ffffff !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    
        .bg_col.c_chk .title, .bg_col.c_chk .number {
            color: #ffffff !important
        }
    
    .main-header .nav-bottom .page-navigation > .nav-item.submenu > .nav-link_1:after {
        color: rgba(255, 255, 255, 0.00);
    }
    
    @media (max-width: 1134px) {
        .main-header .nav-bottom .page-navigation > .nav-item.submenu > .nav-link_1:after {
            display: none
        }
    }
    
    @media (min-width: 1000px) {
        .pl-set-10 {
            padding-left: 1rem !important;
        }
    }

    ol.stepper {
        --default-b: lightgrey;
        --default-c: black;
        --active-b: #06a80c;
        --active-c: white;
        --active-d: #4242cb;
        --circle: 2.6em; /* size of circle */
        --b: 2px; /* line thickness */
        display: flex;
        background: linear-gradient(var(--default-b) 0 0) no-repeat 50% calc((var(--circle) - var(--b))/2)/100% var(--b);
        list-style: none;
        justify-content: space-between;
        counter-reset: step;
        padding: 0;
        font-size: 22px;
        font-weight: bold;
        counter-reset: step;
        overflow: hidden;
        /*gap: 60px;*/
    }
    
        ol.stepper li {
            display: grid;
            place-items: center;
            gap: 5px;
            font-family: sans-serif;
            position: relative;
            font-family: 'Kanit';
        }
    
            ol.stepper li span {
                font-size: 16px;
                color: var(--active-b);
            }
    
            ol.stepper li::before {
                /*content: " ✔";*/
                content: counter(step) "";
                counter-increment: step;
                display: grid;
                place-content: center;
                aspect-ratio: 1;
                height: var(--circle);
                border: 5px solid #fff;
                box-sizing: border-box;
                background: #fff;
                color: var(--active-b);
                border-radius: 50%;
                font-family: monospace;
                z-index: 1;
                cursor: pointer;
                /*text-shadow: rgb(0 0 0 / 10%) 4px 4px 0px;*/
                box-shadow: 0px 0px 0px 6px var(--active-b) inset;
            }
    
    
    
            ol.stepper li.active ~ li::before {
                /*content: "";*/
                background: #fff;
                box-shadow: 0px 0px 0px 6px var(--default-b) inset;
                color: var(--default-b);
                cursor: unset
            }
    
            ol.stepper li.active ~ li span {
                color: var(--default-b);
            }
    
            ol.stepper li.active_chk + li {
                /*content: "";*/
                cursor: pointer !important
            }
    
            ol.stepper li.active_chk::before {
                /*content: "";*/
                background: #fff !important;
                box-shadow: 0px 0px 0px 6px var(--active-b) inset !important;
                color: var(--active-b) !important;
            }
    
            ol.stepper li.active_chk span {
                color: var(--active-b) !important;
            }
    
            ol.stepper li.active::before {
                /*content: "";*/
                background: #fff !important;
                box-shadow: 0px 0px 0px 6px var(--active-d) inset !important;
                color: var(--active-d) !important;
            }
    
            ol.stepper li.active span {
                color: var(--active-d) !important;
            }
    
            ol.stepper li.active::after {
                /*content: "";*/
                position: absolute;
                width: var(--b);
                bottom: 100%;
                left: calc((var(--circle) - var(--b))/2);
                top: auto;
                right: auto;
                height: 100vw;
                background: var(--active-b);
            }
    
    
    
    @media (max-width: 600px) {
        ol.stepper {
            --circle: 2em; /* size of circle */
            --b: 2px; /* line thickness */
            display: flex;
            gap: unset;
            background: linear-gradient(var(--default-b) 0 0) no-repeat 50% calc((var(--circle) - var(--b))/2)/100% var(--b);
        }
    
            ol.stepper li {
                display: grid;
            }
    
                ol.stepper li span {
                    display: none;
                    /*font-size: 10px;
                    font-weight:200*/
                }
    
                ol.stepper li::before {
                    /*content: " ✔";*/
                    box-shadow: 0px 0px 0px 4px var(--active-b) inset;
                }
    
    
    
                ol.stepper li.active ~ li::before {
                    box-shadow: 0px 0px 0px 4px var(--default-b) inset;
                }
    
                ol.stepper li.active_chk::before {
                    box-shadow: 0px 0px 0px 4px var(--active-b) inset !important;
                }
    
                ol.stepper li.active::before {
                    box-shadow: 0px 0px 0px 4px var(--active-d) inset !important;
                }
    
                ol.stepper li.active::after {
                    height: var(--b);
                    right: 100%;
                    top: calc((var(--circle) - var(--b))/2);
                    width: 100vw;
                    background: var(--active-b);
                    bottom: unset;
                    left: unset
                }
    }