.color-red {
    color: red;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20{
    margin-top: 20px;
}

.mt-15-p {
    margin-top: 15%;
}

.pb-25 {
    padding-bottom: 25px;
}


.pr-5{
    padding-right:5px;
}

.pr-10 {
    padding-right: 10px;
}


.pl-20 {
    padding-left: 20px;
}

.pt-5 {
    padding-top: 5px;
}

.mb-0{
    margin-bottom:0px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}


.mr-5 {
    margin-right: 5px;
}

.mr-20{
    margin-right:20px;
}


.ml-5 {
    margin-left: 5px;
}

.ml-20 {
    margin-left: 20px;
}

/*------Validate Boostrap Start------*/
.help-block {
    color: #dc3545 !important;
    font-size: 1.25rem;
    padding: 3px;
}

.validControl {
    /*border-color: #28a745 !important;*/
    outline: none;
}

.invalidControl {
    border-color: #dc3545 !important;
    outline: none !important;
}

.validControl:focus {
    /*border-color: #28a745 !important;*/
    outline: none;
    box-shadow: none; /*0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;*/
}

.invalidControl:focus {
    border-color: #dc3545 !important;
    outline: none !important;
    box-shadow: none !important;
}


/*Label Validate*/
.lblValidate::after {
    content: " *";
    color: red;
}



.w-100 {
    width: 100%;
}

.font-size16{
    font-size:16px;
}


.cursor-pointer{
    cursor:pointer;
}

.d-none{
    display:none;
}

.d-flex {
    display: flex;
}

/*.select2-container .select2-selection--single{
    height:34px !important;
}
*/


/* Bootstrap dropdown select */
.bootstrap-select.btn-dropdown-light {
    color: #212529;
    background-color: white;
    border-color: #c7c7c7;
}


.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    color: #2f4050 !important;
    background-color: white;
}

.bootstrap-select.disabled, .bootstrap-select > .disabled {
    background-color: #eee !important;
}

    .bootstrap-select.disabled:active, .bootstrap-select > .disabled:active {
        background-color: #eee !important;
    }

.btn-default:not(.invalidControl) {
    border-color: #aaa !important;
}


.btn-default:hover:not(.invalidControl), .btn-default:focus:not(.invalidControl), .btn-default:active:not(.invalidControl), .btn-default.active, .open .dropdown-toggle.btn-default, .btn-default:active:focus, .btn-default:active:hover, .btn-default.active:hover, .btn-default.active:focus {
    border-color: #aaa !important;
}

    .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover {
        color: black !important;
        background-color: white !important;
        border-color: #aaa !important;
    }

.select2-container {
    width: 100% !important;
}


.btn-default.active:not(.disabled), .btn-default:active:not(.disabled), .open > .dropdown-toggle.btn-default:not(.disabled) {
    background-color: white;
}

.btn-default.active:not(.disabled), .btn-default:active:not(.disabled), .open > .dropdown-toggle.btn-default:not(.disabled) {
    background-color: white;
}

.btn-default.focus:not(.disabled), .btn-default:focus:not(.disabled) {
    background-color: white;
}


.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default.active[disabled], fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
    color: #000000;
}



.form-control, .single-line {
    border: 1px solid #aaaaaa;
}


table.dataTable th.dt-left, table.dataTable td.dt-left {
    text-align: left;
}

table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
    text-align: center;
}

table.dataTable th.dt-right, table.dataTable td.dt-right {
    text-align: right;
}

table.dataTable th.dt-justify, table.dataTable td.dt-justify {
    text-align: justify;
}

table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap {
    white-space: nowrap;
}

table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left, table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left {
    text-align: left;
}

table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center, table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center {
    text-align: center;
}

table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right {
    text-align: right;
}

table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify, table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify {
    text-align: justify;
}

table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap {
    white-space: nowrap;
}

table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left {
    text-align: left;
}

table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center {
    text-align: center;
}

table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right {
    text-align: right;
}

table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify {
    text-align: justify;
}


.font-color-white{
    color:white;
}

.font-link {
    color: #0670cf
}


.style-textarea {
    height: 75px !important;
    width: 100% !important;
}

.panel-footer {
    background-color: #ffffff !important;
}


.vertical-middle {
    vertical-align: middle !important;
}

.font-bold{
    font-weight:bold;
}
/* สำหรับหน้าจอแท็บเล็ตที่มีความกว้างไม่เกิน 1024px */
@media (min-width: 1024px) and (max-width: 3840px) {
    .pl-0 {
        padding-left: 0px !important;
    }

    .pr-0 {
        padding-right: 0px !important;
    }

    /* ปรับแต่ง CSS ที่นี่ */
    .text-right-btn-mobile {
        text-align: right !important;
    }

    .text-left-btn-mobile {
        text-align: left !important;
    }
}


.file-caption.icon-visible .file-caption-name {
    padding-left: 2.875rem;
}

.file-caption-icon {
    padding: 0.9rem;
}