/* 
        Directory Design
        #   1.root
        #   2.login
        #   3.card
        #   4.input
        #   5.menu
        #   6.dashboard
        #   7.quick send
        #   8.responsive
        #   9.login-page
        #  10.new-form-credit-transfer
        #  11.autoWidth-DataTable
*/
/* ------------------------------------------------------------------------------------------------------- */
/* 1.root */
:root {
    --main-color: #00A572;
    --main2-color: #95C11F;
    --sub-color: #F4F4F4;
    --sub2-color: #F9F9F9;
    --sub3-color: #A6A6A6;
    --sub4-color: #77787D;
    --sub5-color: #EFEFEF;
    --sub6-color: #9D9D9D;
    --del-color: #C32121;

    --font-family: 'IBM Plex Sans Thai', sans-serif;


    --header-text: 35px;
    --card-main-text: 20px;
    --main-text: 16px;
    --sub-text: 16px;
    --detail-text: 14px;
    --alert-text: 12px;

    --btn: 14px;


}
.dropdown-item .active{
    color: #fff;
    text-decoration: none;
    background-color: var(--main-color) !important;
}
#tb-dasboard tbody>tr:hover {
    background-color: #f8f9fa;
    text-align: -webkit-center;
    border-left: unset!important;
}
.card-dashboard{
    max-width: 500px;
    width: 100%;
}
.col-dashboard{
    display: flex;
    align-items: center;
    justify-content: center;
}
.responsive-dashboard{
    max-width: 80%;
}
.dashboard-detail{
    border-radius: 10px !important;
}
.sender-name-dashboard{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.box-dashboard-list {
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    margin-bottom: 1rem;

    font-size: var(--sub-text);
    font-weight: bold;
    /* Registered Sender Name */
    position: relative;
    z-index: 999;
    top: 20px;
    width: 80%;
    margin: auto;
    border-radius: 5px;
}
.login-content{
    max-width: 450px;

    display: flex;
    align-items: center;
    justify-content: center;
}
.text-12{
    font-size: 12px!important;
}
body:not(.layout-fixed) .main-sidebar .sidebar::-webkit-scrollbar {
    display: none;
}
body:not(.layout-fixed) .main-sidebar .sidebar {
    scrollbar-width: none;
}
@media screen and (max-width: 1600px) {        
:root {
    --main-color: #00A572;
    --main2-color: #95C11F;
    --sub-color: #F4F4F4;
    --sub2-color: #F9F9F9;
    --sub3-color: #A6A6A6;
    --sub4-color: #77787D;
    --sub5-color: #EFEFEF;
    --sub6-color: #9D9D9D;

    --header-text: 26px;
    --card-main-text: 20px;
    --main-text: 16px;
    --sub-text: 16px;
    --detail-text: 14px;
    --alert-text: 12px;
}
.responsive-dashboard{
    max-width: 80%;
}
}
@media screen and (max-width: 1440px) {        
    .responsive-dashboard{
        max-width: 100%;
    }
    .sender-name-dashboard {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: unset;
    }
}
@media screen and (max-width: 768px) {        
:root {
    --main-color: #00A572;
    --main2-color: #95C11F;
    --sub-color: #F4F4F4;
    --sub2-color: #F9F9F9;
    --sub3-color: #A6A6A6;
    --sub4-color: #77787D;
    --sub5-color: #EFEFEF;
    --sub6-color: #9D9D9D;

    --header-text: 28px;
    --card-main-text: 22px;
    --main-text: 17px;
    --sub-text: 16px;
    --detail-text: 14px;
    --alert-text: 12px;

}
.layout-login>div:last-child {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
    z-index: 20;
    padding-left: unset!important;
    padding-right: unset!important;
    position: relative;
    border-radius: 20px 20px 0 0
}
.responsive-dashboard{
    max-width: 100%;
}
  /* font setting */
li.dropdown::marker {
    display: none;
    unicode-bidi: unset!important;
}
.o-style-dropdown{
    width: 100px;
}
  
.blog-dashboard-text {
    padding: 10px 10px !important;
    text-align: -webkit-center;
    border-left: unset;
}
.card-dashboard {
    margin: 5px 0px !important;
    background-color: unset;
}
}
body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-style: normal;
    /* font-family: 'Kanit', sans-serif; */
}
body.english {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-style: normal;
    /* font-family: 'Helvetica', sans-serif; */
}
body{
    margin: unset!important;
}
/* 2.login */
.icon-in-lb {
    font-size: var(--main-text);
    position: absolute;
    /* top: 30%; */
    /* left: 2%; */
    color: var(--sub6-color);
    width: 45px;
    height: 100%;
    /* background: var(--sub2-color); */
    border-bottom: 1px solid #e5e5e5 !important;
    border-top: 1px solid #e5e5e5 !important;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.trust{
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-style: italic;
    font-size: 30px;
    font-weight: 600;
    color: #969696;
}
.icon-in-rb {
    font-size: var(--main-text);
    position: absolute;
    right: 0;

    color: var(--sub6-color);
    width: 45px;
    height: 100%;
}
.input-thmb {
    padding: 0 45px!important;
    border-radius: 5px!important;
    background: var(--sub5-color);
    color: var(--sub6-color);
    font-size: var(--main-text);
    font-weight: 400;
}

.login-content{
    margin: unset;
}
.svg-cs{
    position: absolute;
    top: 0;
    margin-left: 12px;
    top: 45%;
    transform: translate(-50%, -50%);
}
.log-lb{
    margin-left: 25px;
    position: sticky;
    z-index: 1;
    font-size: calc(var(--main-text) - 2.7px )
}
.log-lb-term{
    margin-left: 25px;
    position: sticky;
    z-index: 1;
    font-size: calc(var(--main-text) - 2.7px )
}

.login-image {
    padding: 0;
}

.my-slider-progress {
    background: #ccc;
}

.my-slider-progress-bar {
    background: var(--main-color);
    height: 2px;
    transition: width 400ms ease;
    width: 0;
}


/* 3.card */
.card {
    border-radius: 20px!important;
}

.card-header {
    background-color: var(--main-color);
    color: var(--sub2-color);
    border-top-left-radius: 20px!important;
    border-top-right-radius: 20px!important;
}

/* 4.input */
#set_filter{
    font-size: var(--btn)!important;
}
#clear_filter{
    font-size: var(--btn)!important;
}
.datetimepicker-input{
    border-right: unset;
}
.fa-calendar:before {
    content: "\f133";
    color: #A6A6A6;
}
#calendar_show>.fa-calendar:before {
    content: "\f133";
    color: #FFF;
}
.before_send{
    max-width: 720px!important;
}
.input-group-text {
    background-color: transparent;
    border: unset;
    border-top: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
}
.login-btn {
    display: block !important;
    width: 100% !important;
    line-height: 45px !important;
    padding: 0 35px !important;
    text-transform: uppercase !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    -webkit-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    -moz-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
}
.back-btn {
    display: block !important;
    width: 100% !important;
    line-height: 45px !important;
    padding: 0 35px !important;
    text-transform: uppercase !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    -webkit-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    -moz-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
}
.login-btn{
    font-size: var(--main-text);
    font-weight: bold;
    border-radius: 5px!important;
    background: var(--main2-color)!important;
}
.login-btn:hover{
    border-radius: 5px!important;
    background: var(--main-color)!important;
}
.back-btn{
    font-size: var(--main-text);
    font-weight: bold;
    border-radius: 5px!important;
    background: var(--sub5-color)!important;
}
.back-btn:hover{
    border-radius: 5px!important;
    background: var(--sub3-color)!important;
}

.toggle-password {
    float: unset;
    margin-right: unset;
    margin-top: unset;
    position: unset;
    z-index: unset;
}
/* From Uiverse.io by PriyanshuGupta28 */ 
#terms .border-danger .checkbox-wrapper input[type=checkbox]:checked + .check {
    border: 1px solid red;
}

.checkbox-wrapper:hover .check {
  stroke-dashoffset: 0;
}

.checkbox-wrapper {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 15px;
  height: auto;
}

.checkbox-wrapper .background {
  fill: var(--sub-color);
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper .stroke {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper .check {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  stroke-dashoffset: 22;
  stroke-dasharray: 22;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  /* opacity: 0; */
  -appearance: none;
  -webkit-appearance: none;
}

.checkbox-wrapper input[type=checkbox]:hover {
  cursor: pointer;
}

.checkbox-wrapper input[type=checkbox]:checked + svg .background {
  fill: var(--main2-color);
  cursor: pointer;
}

.checkbox-wrapper input[type=checkbox]:checked + svg .stroke {
  stroke-dashoffset: 0;
  cursor: pointer;
}

.checkbox-wrapper input[type=checkbox]:checked + svg .check {
  stroke-dashoffset: 0;
  cursor: pointer;
}

/* 5.menu */

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--main-color);
    color: #fff;
}
.content-header{
    padding: 8px 0.5rem; 
}
.nav-item .nav-item:hover{
    background: #5D6E75;
}

/* 6.dashboard */
.blog-dashboard{
    padding-top: unset;
    background-color: unset;

    display: flex;
    align-items: center;
    justify-content: center;
}
.card .card-dashboard{
    border-radius: 10px !important;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.125), 0 1px 3px rgb(0 0 0 / 30%)!important;
}
.blog-dashboard-text{
    font-size: var(--header-text)!important;
}
.contact{
    font-size: var(--card-main-text)!important;
}
.box-security-list{
    width: 100% !important;
    margin: auto !important
}
.text-o-eclipse{
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}  
@media screen and (max-width: 1150px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
}
@media screen and (max-width: 991px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
}
@media screen and (max-width: 768px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
}

@media screen and (max-width: 500px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
}

/* @media screen and (max-width: 1140px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
} */

/* @media screen and (min-width: 575px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
}
@media screen and (min-width: 500px) {
    .text-o-eclipse{
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }  
} */

.blog-dashboard-text>h1 {
    color: #585858;
    font-weight: bold;
    font-size: var(--header-text) !important;
}
.blog-dashboard-text>h2 {
    color: #76787C;
    border-bottom: 0px solid #e5e5ea !important;
    font-size: var(--sub-text)!important;
    font-weight: 400!important;
}
.text-td-dashboard{
    text-align: start;
    font-size: var(--sub-text);
    font-weight: 400;
    padding-left: 10%!important;
}
.text-header-dashboard22{
    font-size: var(--sub-text);
}

#dashboard-style-a::-webkit-scrollbar {
    width: 4px;
    background-color: #ededed;
}

#dashboard-style-a::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #d3d3d3;
}
.title-dashboard {
    color: #056F35;
    font-size: var(--main-text);
    font-weight: bolder;
    padding-left: 20px;
}
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) {
    background-color: #32434C!important;
}
[class*="sidebar-dark"] .brand-link {
    border-bottom: 1px solid #32434C;
}
.navbar-white {
    background-color: #32434C;
    color: #fff;
}
.card-title {
    float: left;
    font-size: var(--card-main-text)!important;
    font-weight: bold!important;
    margin: 0;
}
.show-credit{
    height: 100%!important;
    font-size: var(--btn);
    font-weight: 400;
    cursor: default;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.o-caps{
    border-radius: 8px;
    height: 30px;
    background: #fff;
}
.lang-caps{
    border-radius: 100px;
    height: 20px;
    background: #fff;
}
.border-100{
    border-radius: 100px;
}
.left-m-text{
    font-size: var(--detail-text);
    font-weight: 400;
}

/* 7.quick send */
.text-main-show{
    color: #77787D;
    font-size: var(--main-text);
    font-weight: bold;
}
.text-main-show-medium{
    color: #77787D!important;
    font-size: var(--main-text);
    font-weight: 500;
}
.text-title-show18-medium{
    color: #77787D;
    font-size: var(--main-text);
    font-weight: 500;
}
.text-title-show15-medium{
    color: #77787D;
    font-size: var(--sub-text);
    font-weight: 500;
}
.filter-option{
    color: #77787D;
    font-size: 15px!important;
    font-weight: 500;
}
.text-title-show{
    color: #77787D;
    font-size: var(--sub-text);
    font-weight: bold;
}
.text-modal-show{
    font-size: 15px!important;
    font-weight: 400!important;
}
.btn-primary{
    background-color: #00A572!important;
    border-color: #00A572 !important;
}
.btn-primary:hover{
    opacity: 0.8;
    background-color: #00A572!important;
    border-color: unset!important;
}
.btn-c{
    color: #000;
    background-color: #fff;
    border: 1px solid #ced4da!important;
}
.btn-c:hover{
    color: #000;
    background-color: #e9ecef;
    border: 1px solid #ced4da!important;
}
.btn-c:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show>.btn-danger.dropdown-toggle {
    color: #000;
    background-color: #e9ecef;
    border: 1px solid #ced4da!important;
}
.btn-danger:focus, .btn-danger.focus{
    color: #000;
    background-color: #e9ecef!important;
    border: 1px solid #ced4da!important;
}
.bootstrap-select .dropdown-toggle {
    color: #A6A6A6 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
}
/* .bootstrap-datetimepicker-widget{
    font-size: 14px;
    font-weight: 400;
}
.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour{
    width: 200px;
    height: 150px;
}

.bootstrap-datetimepicker-widget>.list-unstyled{
    width: 200px;
    height: 150px;
}
.bootstrap-datetimepicker-widget table td{
    height: 34px;
    line-height: 34px;
    width: 34px;
}
.bootstrap-datetimepicker-widget table td span{
    height: 34px;
    line-height: 34px;
    width: 34px;
} */
.table-condensed tbody tr:last-child td{
    border-bottom: unset!important;
}
.fa-arrow-up{
    color: var(--main-color)!important;
    font-size: var(--alert-text)!important;
}
.fa-arrow-down{
    color: var(--main-color)!important;
    font-size: var(--alert-text)!important;
}
.fs-13{
    font-size: var(--btn);
}
.fs-15-fade{
    font-size: var(--detail-text);
    color: #77787D;
}
.fs-13-fade{
    font-size: var(--btn)!important;
    color: #77787D;
}
.sms-blog-style {
    background-color: #F9F9F9;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid #F9F9F9;
    border-top: 4px solid #F9F9F9;
    max-width: 242px;
}
.preview_text{
    font-family: var(--font-family);
}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: solid dotted #333 !important;
    outline: 0.5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
    outline-color: #80bdff !important;
}
/* input[type='radio']:after {
    width: 10px;
    height: 10px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
} */
.radio-inline{
    cursor: pointer;
}
.text-10px{
    font-size: var(--alert-text);
}
.text-13px {
    font-size:  var(--alert-text);
}
.title-text-10px{
    font-weight: 500;
    font-size:  var(--alert-text);
}
.modal-content{
    border-radius: 20px!important;
}
/* .dataTables_scrollFootInner{
    width: 100%!important;
}
table{
    width: 100%!important;
}
.dataTables_scrollBody{
    width: 100%!important;
}
.dataTables_scrollHeadInner{
    width: 100%!important;
} */

.btn-scheduler {
    height: 35px;
    color: #fff;
    background: var(--main-color);
    border: 1px solid #fff;
    padding: 0.375rem 0.75rem;
    border-radius: 5px;
}

.table-bordered thead tr th{
    background-color: #00A572!important;
    color: #fff;
}
.table-bordered tfoot tr td{
    background-color: #00A572!important;
    color: #fff;
}
tfoot tr td{
    height:30px!important;
    padding: 5px 12px !important;
}
.dataTables_empty{
    border-bottom: 1px solid #dee2e6!important;
}
tbody tr:last-child td{
     border-bottom: 1px solid #dee2e6!important;
}
.table-bordered thead tr:first-child th:first-child{
    border-top-left-radius: 20px;
    border-left: 1px solid #dee2e6!important;
}
.table-bordered thead tr:first-child th:last-child{
    border-top-right-radius: 20px;
}
.table-bordered tfoot tr:first-child td:first-child{
    border-bottom-left-radius: 20px;
    border-left: 1px solid #dee2e6!important;
}
.table-bordered tfoot tr:last-child td:last-child{
    border-bottom-right-radius: 20px;
    
}
.table-bordered  {
    border: unset;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /* border-left: 1px solid #dee2e6; */
    /* border-right: 1px solid #dee2e6; */
}
.table-bordered tbody tr td{
    border-radius: unset!important;
    border-left: 1px solid #dee2e6!important;
    font-size: var(--detail-text);
    font-weight: 400;
}
.sc-noti{
    overflow: auto;
    height: 486px;
}
.table-bordered thead tr th{
    font-size: var(--main-text);
    font-weight: bold;
}
.table-bordered tfoot tr td{
    font-size: var(--main-text);
    font-weight: bold;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    background-color: transparent;
    color: #77787D;
    border: unset;
}
.page-item.active .page-link{
    background-color: transparent;
    color: #77787D;
    border: 1px solid #77787D;
    border-radius: 6px;
}

.page-item:first-child .page-link {
    margin-right:10px;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    background-color: #00A572;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.page-item:last-child .page-link {
    margin-left:10px;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    background-color: #00A572;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.pagination{
    display: flex!important;
    align-items: center!important;
    max-width: 450px;
}
.page-link{
    display: flex!important;
    align-items: center!important;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;
    padding-top: 2px;
}
.page-link:hover {
    z-index: 2;
    color: #00A572;
    text-decoration: none;
    background-color: transparent;
    border-color: #00A572;
}

.page-link:focus{
    box-shadow: none!important;
}
.disabled {
    pointer-events: none;
    opacity: 0.5;

}

.dataTables_info{
    color: #77787D;
    font-size: var(--detail-text);
    font-weight: 400;
}
.dataTables_length{
    color: #77787D;
    font-size: var(--main-text);
    font-weight: 100;
}
.dataTables_filter{
    color: #77787D;
    font-size: var(--main-text);
    font-weight: 400;
}
.custom-select{
    color: #77787D;
    font-size: var(--detail-text);
    font-weight: 100;
}
.dataTables_empty{
    color: #77787D;
}
.img-contact{
    vertical-align: unset;
    /* margin-bottom: 5px; */
}
.text-contact{
    color: #77787D!important;
    font-size: calc(var(--main-text) + 1px);
    font-weight: 500;
}
.text-content-title{
    color: #A6A6A6;
    font-size: var(--detail-text);
    font-weight: 400;
}
.text-content-title-scan{
    color: #00A572;
    font-size: var(--detail-text);
    font-weight: 400;
}
.img-scan{
    vertical-align: unset;
    width: 200px;

}
.line-add{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

p.from-me::before {
    border-bottom-left-radius: 0.8rem 0.7rem;
    border-right: 1rem solid #fff;
    right: -0.35rem;
    transform: translate(0, -0.1rem);
}
p.from-me::after {
    background-color: #eaeaea;
    border-bottom-left-radius: 0.5rem;
    right: -40px;
    transform: translate(-30px, -2px);
    width: 10px;
}
.container-imsg{
    margin: 0 auto;
    padding: 1rem;
    margin-top: 20px;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto;
    }
}
.logo-responsive{
    width: 70%;
    max-width: 230px;
}
.login-container{
    margin: 0;
    width: 100%;
}
.login-blog{
    justify-content: start!important;
    height: 100%;
    margin: 0;
    padding: 0;
    /* position: relative;
    transform: translate(2%, 14%) !important;
    top: 50%;
    left: 0%; */
}
@media (max-width: 1200px) {
    .login-image{
        display: none;
    }
    /* .login-blog{
        justify-content: center!important;
    } */

    .log-lb{
        font-size: 16px
    }
    .log-lb-term{
        margin-left: 25px;
        font-size: 15px
    }


}
@media (max-width: 450px) {
    .log-lb{
        font-size: 15px;
    }
    .log-lb-term{
        margin-left: 25px;
        font-size: 14px;
    }

}
@media (max-width: 380px) {
    .log-lb{
        font-size: 13px;
    }
    .log-lb-term{
        margin-left: 25px;
        font-size: 11px;
    }

}

.fa-exclamation-circle:before {
    content: "\f06a";
    padding-right: 10px;
}
.nav-item .fas {
    color:#fff!important;
}
.button-dashboard {
    color: #fff;
    /* border: 1px solid #fff; */
    padding: .05rem .75rem;
    font-size: var(--detail-text)!important;
}
.note{
    font-size: var(--alert-text);
    color: #999;    
    margin-top: 10px;
    font-weight: 400;
}
/* label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 400!important;
} */

.alert-t{
    font-size: var(--alert-text);
    font-weight: 400!important;
}



/* 8.responsive */
@media screen and (max-width: 800px) {
    .mobile{
        display: flex;
    }
    .desktop{
        display: none;
    }
    .mobile-d{
        display: block;
    }
    .desktop-d{
        display: none;
    }
    .trust{
        font-family: 'IBM Plex Sans Thai', sans-serif;
        font-style: italic;
        font-size: 22px;
        font-weight: 600;
        color: #969696;
    }
}
@media screen and (min-width: 800px) {
    .mobile{
        display: none;
    }
    .desktop{
        display: flex;
    }
    .mobile-d{
        display: none;
    }
    .desktop-d{
        display: inline;
    }
    .active-dashboard {
        color: #fff !important;
        background-color: unset !important;
        border: 1px solid #fff !important;
    }
}
.desktop-login{
    display: none;
}
@media screen and (min-width: 1200px) {
    .mobile-login{
        display: none;
    }
    .desktop-login{
        display: flex;
    }
}
.desktop-splide{
    display: none;
}
@media screen and (min-width: 1100px) {
    .mobile-splide{
        display: none;
    }
    .desktop-splide{
        display: flex;
    }

    /* paginate stick right */
    [id$="_paginate"] {
        display: flex;
        flex-direction: row;
        justify-content: end;
        position: relative;
        right: 25px;
    }
}
.export-btn{
    /* background-color: unset!important; */
    background-color: white; 
    border: 1px solid #a9a9a9;
}
.paginate_button{
    width: 45px;
    margin-left:2.5px;
    margin-right:2.5px;
}
.page-link{
    width: 100%;
}

.export-btn:hover{
    background: var(--sub5-color);
}
.bt-e9{
    /* border-top: 1px solid #e9e9e9; */
}

.btn-lang.dropdown-toggle::after{
    display: inline-block;
    margin-left: unset;
    vertical-align: unset;
    content: unset;
    border-top: unset;
    border-right: unset;
    border-bottom: unset;
    border-left: unset;
}
.btn-lang:focus{
    outline: none;
    box-shadow: none;
}
.btn-lang{
    font-size: var(--btn);
    font-weight: 400;
}
.lang-caps-login {
    border-radius: 100px;
    height: 26px;
    background: #fff;
}
.lang-position .dropdown-item.active,.lang-position .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--main-color)!important;
}

select:focus > option:checked { 
    color:#fff;
    background-color: var(--main-color)!important;
}
option:hover {
    color:#000;
    background-color: #ededed !important;
}
@media screen and (max-width: 1024px) {
    .logo-responsive {
        width: 50%;
    }
}
.lang-position{
    position: absolute;
    right: 0;
    background-color: transparent;
    z-index: 99999;
}

/* 9.login-page */

.overflow-y-scroll {
    overflow-y: auto
}
.-mt-4 {
    margin-top: -1rem
}
.relative{
    position: relative;
}
.flex{
    display: flex;
}


.layout-login {
    position: relative;
    height: 100dvh
}
.img-responsives{
    width: 70%;
}
@media(min-width: 1024px) {
    .layout-login {
        display:grid;
        grid-auto-flow: column;
        grid-template-columns: auto 1fr
    }
    .img-responsives{
        width: 50%;
    }
}

.layout-login>div:first-child {
    aspect-ratio: 78/50;
    overflow: hidden
}

@media(min-width: 1024px) {
    .layout-login>div:first-child {
        height:100dvh;
        aspect-ratio: 6/9
    }
}

.layout-login>div:last-child {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
    z-index: 20;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    position: relative;
    border-radius: 20px 20px 0 0
}

@media(min-width: 640px) {
    .layout-login>div:last-child {
        display:flex;
        justify-content: center
    }
}

@media(min-width: 1024px) {
    .layout-login>div:last-child {
        margin-left:-1.25rem;
        padding-left: 4rem;
        padding-right: 4rem;
        justify-content: flex-start
    }
}

@media(min-width: 1280px) {
    .layout-login>div:last-child {
        padding-left:6rem;
        padding-right: 6rem
    }
}

@media(min-width: 1024px) {
    .layout-login>div:last-child {
        border-radius:20px 0 0 20px
    }
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    touch-action: manipulation;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0)
}

.owl-carousel .owl-item,.owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%
}

.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled {
    display: none
}

.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0!important;
    font: inherit
}

.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.no-js .owl-carousel {
    display: block
}

.owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""] {
    max-height: 0
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
    transform: scale(1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #d6d6d6;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #869791;
    color: #fff;
    text-decoration: none
}

.owl-theme .owl-nav .disabled {
    opacity: .5;
    cursor: default
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 10px
}

.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom:1;display: inline
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px
}

.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span {
    background: #869791
}
/* 10.new-form-credit-transfer */
.blog-transfer {
    background-color: #fff!important;
    border: 1px solid var(--main-color)!important;
}
.blog-transfer-to{
    border: 1px solid #adadad!important;
    /* height: 500px; */
    background-color: #fff!important;
    border-radius: 10px;
}
.title-transfer-to{
    background-color: var(--sub6-color)!important;
}
.title-transfer{
    background-color: var(--main-color)!important;
}
.transfer-img-next-down{
    width: 40px!important;
}

/* 11.autoWidth-DataTable */
.col-sm-12:has(.table-bordered.table-hover.table-center.dataTable.no-footer) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtsummary) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtrevenue_report) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtsale) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtbilling) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtrefund) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtsummary_customer) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dttracking) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dttracking) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dttracking_customer) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dthourly) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtuserlog) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtcontact_group) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtsms_template) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtcredit_transaction) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtcredit_transfer) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtuser_credit_detail) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtcredit_management) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtuser_management) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtform) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtmanage_sender) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtlisting) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtfunction_group) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtfunction_menu) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtaudit_trail) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtannouncement) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtannouncement_history) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtsub_account) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtsms_template) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtotp_service) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}
.col-sm-12:has(#dtmy_credit) {
    overflow-x: auto;
    width: calc(100dvw - 40px) !important;
}

.btn-success{
    background-color: var(--main-color)!important;
    border-color: var(--main-color)!important;
}
.btn-success:hover{
    opacity: 0.8;
    background-color: var(--main-color)!important;
    border-color: unset!important;
}

.datepicker td.active{
    background-color: var(--main-color)!important;
}

/* dashboard */
tbody tr:last-child td.text-td-dashboard {
    border-bottom: none!important;
}

.swal2-confirm{
    background: var(--main-color)!important;
}

.btn-delete{
    background: var(--del-color)!important;
    color: #fff;
    border-color: var(--del-color)!important;
}