@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@200;400;500;800&display=swap");
body {
    font-family: "Sarabun", sans-serif;
}

.mb-20 {    margin-bottom: 20px; }
.mb-15 {    margin-bottom: 15px;}
.mb-10 {    margin-bottom: 10px;}
.mb-5 {    margin-bottom: 5px;}
.mb-2 {    margin-bottom: 2px;}
.mt-20 {    margin-top: 20px;}
.mt-15 {    margin-top: 15px;}
.mt-10 {    margin-top: 10px;}
.mt-5 {    margin-top: 5px;}
.mt-2 {    margin-top: 2px;}
.ml-20 {   margin-left: 20px;}
.ml-15 {    margin-left: 15px;}
.ml-10 {   margin-left: 10px;}
.ml-5 {    margin-left: 5px;}
.ml-2 {    margin-left: 2px;}
.mr-20 {    margin-right: 20px;}
.mr-15 {    margin-right: 15px;}
.mr-10 {   margin-right: 10px;}
.mr-5 {   margin-right: 5px;}
.mr-2 {    margin-right: 2px;}
.mr-0 {    margin-right: 0;}

.mw-100 {
    max-width: 100%;
}

.mw-38px {
    max-width: 38px;
}

.mw-48px {
    max-width: 48px;
}

.mw-30px {
    max-width: 30px;
}

.mw-20px {
    max-width: 20px;
}

.mw-16px {
    max-width: 16px;
}

.w-100 {
    width: 100px;
}

.w-200 {
    width: 200px;
}

.width-50 {
    width: 50% !important;
}

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


.p-15 {    padding: 15px !important;}

.pl-0 {     padding-left: 0px !important;}
.pl-6 {     padding-left: 6px !important;}
.pl-10 {    padding-left: 10px !important;}
.pl-50 {    padding-left: 50px !important;}

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

.pt-0 {     padding-top: 0px !important;}
.pt-6 {     padding-top: 6px !important;}
.pt-10 {    padding-top: 10px !important;}
.pt-50 {    padding-top: 50px !important;}

.pb-0 {     padding-bottom: 0px !important;}
.pb-6 {     padding-bottom: 6px !important;}
.pb-10 {    padding-bottom: 10px !important;}
.pb-50 {    padding-bottom: 50px !important;}

.pb-2 {   padding-bottom: 2px !important;}
.pt-2 {    padding-top: 2px !important;}


.size-10 {
    font-size: 10px;
}

.size-12 {
    font-size: 12px;
}

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

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

.size-30 {
    font-size: 30px;
}

.box-shadow {
    box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);
}

.position-relative {
    position: relative;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

  
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-table        { display: table !important; }
.d-table-row    { display: table-row !important; }
.d-table-cell   { display: table-cell !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }


.flex-row            { flex-direction: row !important; }
.flex-column         { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-content-start   { align-content: flex-start !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-center  { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.align-self-auto     { align-self: auto !important; }
.align-self-start    { align-self: flex-start !important; }
.align-self-end      { align-self: flex-end !important; }
.align-self-center   { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch  { align-self: stretch !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

.w-auto { width: auto !important; }
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }



.align-baseline    { vertical-align: baseline !important; } 
.align-top         { vertical-align: top !important; }
.align-middle      { vertical-align: middle !important; }
.align-bottom      { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top    { vertical-align: text-top !important; }

.visible {   visibility: visible; }
.invisible {    visibility: hidden;}

.float-left { float: left!important;}
.float-right { float: right!important;}
.float-none { float: none!important;} 

.bg-transparent {
    background-color: transparent!important;
}
.text-wrap {
    white-space: normal!important;
}
.text-break {
    word-wrap: break-word!important;
    word-break: break-word!important;
}
.swal2-backdrop-show {
    overflow-y: visible !important;
}
.swal2-html-container {
    margin: 0 !important;
    padding: 1em 1.6em 0.3em !important;
}

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right!important;
    }
    .pull-left-lg {
        float: left!important;
    }
    .d-lg-none         { display: none !important; }
    .d-lg-inline       { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-table        { display: table !important; }
    .d-lg-table-row    { display: table-row !important; }
    .d-lg-table-cell   { display: table-cell !important; }
    .d-lg-flex         { display: flex !important; }
    .d-lg-inline-flex  { display: inline-flex !important; }

    .flex-lg-row            { flex-direction: row !important; }
    .flex-lg-column         { flex-direction: column !important; }
    .flex-lg-row-reverse    { flex-direction: row-reverse !important; }
    .flex-lg-column-reverse { flex-direction: column-reverse !important; }

    .flex-lg-wrap         { flex-wrap: wrap !important; }
    .flex-lg-nowrap       { flex-wrap: nowrap !important; }
    .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }

    .justify-lg-content-start   { justify-content: flex-start !important; }
    .justify-lg-content-end     { justify-content: flex-end !important; }
    .justify-lg-content-center  { justify-content: center !important; }
    .justify-lg-content-between { justify-content: space-between !important; }
    .justify-lg-content-around  { justify-content: space-around !important; }

    .align-lg-items-start    { align-items: flex-start !important; }
    .align-lg-items-end      { align-items: flex-end !important; }
    .align-lg-items-center   { align-items: center !important; }
    .align-lg-items-baseline { align-items: baseline !important; }
    .align-lg-items-stretch  { align-items: stretch !important; }

    .align-lg-content-start   { align-content: flex-start !important; }
    .align-lg-content-end     { align-content: flex-end !important; }
    .align-lg-content-center  { align-content: center !important; }
    .align-lg-content-between { align-content: space-between !important; }
    .align-lg-content-around  { align-content: space-around !important; }
    .align-lg-content-stretch { align-content: stretch !important; }

    .align-lg-self-auto     { align-self: auto !important; }
    .align-lg-self-start    { align-self: flex-start !important; }
    .align-lg-self-end      { align-self: flex-end !important; }
    .align-lg-self-center   { align-self: center !important; }
    .align-lg-self-baseline { align-self: baseline !important; }
    .align-lg-self-stretch  { align-self: stretch !important; }

    .mw-lg-100 { max-width: 100% !important; }
    .mh-lg-100 { max-height: 100% !important; } 

    .w-lg-auto { width: auto !important; }
    .w-lg-25 { width: 25% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-100 { width: 100% !important; }

    .align-lg-baseline    { vertical-align: baseline !important; } 
    .align-lg-top         { vertical-align: top !important; }
    .align-lg-middle      { vertical-align: middle !important; }
    .align-lg-bottom      { vertical-align: bottom !important; }
    .align-lg-text-bottom { vertical-align: text-bottom !important; }
    .align-lg-text-top    { vertical-align: text-top !important; }

    .visible-lg{
        visibility: visible!important;
    }
    .invisible-lg {
        visibility: hidden!important;
    }

    .float-lg-left { float: left!important;}
    .float-lg-right { float: right!important;}
    .float-lg-none { float: none!important;} 

    .mb-lg-20 {    margin-bottom: 20px; }
    .mb-lg-15 {    margin-bottom: 15px;}
    .mb-lg-10 {    margin-bottom: 10px;}
    .mb-lg-5 {    margin-bottom: 5px;}
    .mb-lg-2 {    margin-bottom: 2px;}
    .mt-lg-20 {    margin-top: 20px;}
    .mt-lg-15 {    margin-top: 15px;}
    .mt-lg-10 {    margin-top: 10px;}
    .mt-lg-5 {    margin-top: 5px;}
    .mt-lg-2 {    margin-top: 2px;}
    .ml-lg-20 {   margin-left: 20px;}
    .ml-lg-15 {    margin-left: 15px;}
    .ml-lg-10 {   margin-left: 10px;}
    .ml-lg-5 {    margin-left: 5px;}
    .ml-lg-2 {    margin-left: 2px;}
    .mr-lg-20 {    margin-right: 20px;}
    .mr-lg-15 {    margin-right: 15px;}
    .mr-lg-10 {   margin-right: 10px;}
    .mr-lg-5 {   margin-right: 5px;}
    .mr-lg-2 {    margin-right: 2px;}
    .mr-lg-0 {    margin-right: 0;}

    .pl-lg-0 {     padding-left: 0px !important;}
    .pl-lg-6 {     padding-left: 6px !important;}
    .pl-lg-10 {    padding-left: 10px !important;}
    .pl-lg-50 {    padding-left: 50px !important;}

    .pr-lg-0 {     padding-right: 0px !important;}
    .pr-lg-6 {     padding-right: 6px !important;}
    .pr-lg-10 {    padding-right: 10px !important;}
    .pr-lg-50 {    padding-right: 50px !important;}

    .pt-lg-0 {     padding-top: 0px !important;}
    .pt-lg-6 {     padding-top: 6px !important;}
    .pt-lg-10 {    padding-top: 10px !important;}
    .pt-lg-50 {    padding-top: 50px !important;}

    .pb-lg-0 {     padding-bottom: 0px !important;}
    .pb-lg-6 {     padding-bottom: 6px !important;}
    .pb-lg-10 {    padding-bottom: 10px !important;}
    .pb-lg-50 {    padding-bottom: 50px !important;}

    .pb-lg-2 {   padding-bottom: 2px !important;}
    .pt-lg-2 {    padding-top: 2px !important;}

    .text-lg-left {
        text-align: left!important;;
    }
    .text-lg-right {
        text-align: right!important;;
    }
    .text-lg-center {
        text-align: center!important;;
    }

    .bg-lg-transparent {
        background-color: transparent!important;
    }
    .position-lg-relative {
        position: relative !important;
    }
    .position-lg-static {
        position: static !important;
    }
 }
 @media screen and (min-width: 992px) and (max-width:1199px) {
    .pull-right-md {
        
        float: right!important;
    }
    .pull-left-md {
        float: left!important;
    }
    .d-md-none         { display: none !important; }
    .d-md-inline       { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block        { display: block !important; }
    .d-md-table        { display: table !important; }
    .d-md-table-row    { display: table-row !important; }
    .d-md-table-cell   { display: table-cell !important; }
    .d-md-flex         { display: flex !important; }
    .d-md-inline-flex  { display: inline-flex !important; }

    .flex-md-row            { flex-direction: row !important; }
    .flex-md-column         { flex-direction: column !important; }
    .flex-md-row-reverse    { flex-direction: row-reverse !important; }
    .flex-md-column-reverse { flex-direction: column-reverse !important; }

    .flex-md-wrap         { flex-wrap: wrap !important; }
    .flex-md-nowrap       { flex-wrap: nowrap !important; }
    .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }

    .justify-md-content-start   { justify-content: flex-start !important; }
    .justify-md-content-end     { justify-content: flex-end !important; }
    .justify-md-content-center  { justify-content: center !important; }
    .justify-md-content-between { justify-content: space-between !important; }
    .justify-md-content-around  { justify-content: space-around !important; }

    .align-md-items-start    { align-items: flex-start !important; }
    .align-md-items-end      { align-items: flex-end !important; }
    .align-md-items-center   { align-items: center !important; }
    .align-md-items-baseline { align-items: baseline !important; }
    .align-md-items-stretch  { align-items: stretch !important; }

    .align-md-content-start   { align-content: flex-start !important; }
    .align-md-content-end     { align-content: flex-end !important; }
    .align-md-content-center  { align-content: center !important; }
    .align-md-content-between { align-content: space-between !important; }
    .align-md-content-around  { align-content: space-around !important; }
    .align-md-content-stretch { align-content: stretch !important; }

    .align-md-self-auto     { align-self: auto !important; }
    .align-md-self-start    { align-self: flex-start !important; }
    .align-md-self-end      { align-self: flex-end !important; }
    .align-md-self-center   { align-self: center !important; }
    .align-md-self-baseline { align-self: baseline !important; }
    .align-md-self-stretch  { align-self: stretch !important; }

    .mw-md-100 { max-width: 100% !important; }
    .mh-md-100 { max-height: 100% !important; }  

    .w-md-auto { width: auto !important; }
    .w-md-25 { width: 25% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }

    .align-md-baseline    { vertical-align: baseline !important; } 
    .align-md-top         { vertical-align: top !important; }
    .align-md-middle      { vertical-align: middle !important; }
    .align-md-bottom      { vertical-align: bottom !important; }
    .align-md-text-bottom { vertical-align: text-bottom !important; }
    .align-md-text-top    { vertical-align: text-top !important; }

    .visible-md{
        visibility: visible!important;;
    }
    .invisible-md {
        visibility: hidden!important;;
    }
    .float-md-left { float: left!important;}
    .float-md-right { float: right!important;}
    .float-md-none { float: none!important;} 
    
    .mb-md-20 {    margin-bottom: 20px; }
    .mb-md-15 {    margin-bottom: 15px;}
    .mb-md-10 {    margin-bottom: 10px;}
    .mb-md-5 {    margin-bottom: 5px;}
    .mb-md-2 {    margin-bottom: 2px;}
    .mt-md-20 {    margin-top: 20px;}
    .mt-md-15 {    margin-top: 15px;}
    .mt-md-10 {    margin-top: 10px;}
    .mt-md-5 {    margin-top: 5px;}
    .mt-md-2 {    margin-top: 2px;}
    .ml-md-20 {   margin-left: 20px;}
    .ml-md-15 {    margin-left: 15px;}
    .ml-md-10 {   margin-left: 10px;}
    .ml-md-5 {    margin-left: 5px;}
    .ml-md-2 {    margin-left: 2px;}
    .mr-md-20 {    margin-right: 20px;}
    .mr-md-15 {    margin-right: 15px;}
    .mr-md-10 {   margin-right: 10px;}
    .mr-md-5 {   margin-right: 5px;}
    .mr-md-2 {    margin-right: 2px;}
    .mr-md-0 {    margin-right: 0;}

    .pl-md-0 {     padding-left: 0px !important;}
    .pl-md-6 {     padding-left: 6px !important;}
    .pl-md-10 {    padding-left: 10px !important;}
    .pl-md-50 {    padding-left: 50px !important;}

    .pr-md-0 {     padding-right: 0px !important;}
    .pr-md-6 {     padding-right: 6px !important;}
    .pr-md-10 {    padding-right: 10px !important;}
    .pr-md-50 {    padding-right: 50px !important;}

    .pt-md-0 {     padding-top: 0px !important;}
    .pt-md-6 {     padding-top: 6px !important;}
    .pt-md-10 {    padding-top: 10px !important;}
    .pt-md-50 {    padding-top: 50px !important;}

    .pb-md-0 {     padding-bottom: 0px !important;}
    .pb-md-6 {     padding-bottom: 6px !important;}
    .pb-md-10 {    padding-bottom: 10px !important;}
    .pb-md-50 {    padding-bottom: 50px !important;}

    .pb-md-2 {     padding-bottom: 2px !important;}
    .pt-md-2 {     padding-top: 2px !important;}

    .text-md-left {text-align: left!important;}
    .text-md-right {text-align: right!important;}
    .text-md-center {  text-align: center!important;}
    .bg-md-transparent {
        background-color: transparent!important;
    }
    .position-md-relative {
        position: relative !important;
    }
    .position-md-static {
        position: static !important;
    }
}
@media (min-width: 992px) {
    
}

@media screen and (min-width: 768px) and (max-width:991px) {
    .d-sm-none         { display: none !important; }
    .d-sm-inline       { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block        { display: block !important; }
    .d-sm-table        { display: table !important; }
    .d-sm-table-row    { display: table-row !important; }
    .d-sm-table-cell   { display: table-cell !important; }
    .d-sm-flex         { display: flex !important; }
    .d-sm-inline-flex  { display: inline-flex !important; }


    .flex-sm-row            { flex-direction: row !important; }
    .flex-sm-column         { flex-direction: column !important; }
    .flex-sm-row-reverse    { flex-direction: row-reverse !important; }
    .flex-sm-column-reverse { flex-direction: column-reverse !important; }

    .flex-sm-wrap         { flex-wrap: wrap !important; }
    .flex-sm-nowrap       { flex-wrap: nowrap !important; }
    .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }

    .justify-sm-content-start   { justify-content: flex-start !important; }
    .justify-sm-content-end     { justify-content: flex-end !important; }
    .justify-sm-content-center  { justify-content: center !important; }
    .justify-sm-content-between { justify-content: space-between !important; }
    .justify-sm-content-around  { justify-content: space-around !important; }

    .align-sm-items-start    { align-items: flex-start !important; }
    .align-sm-items-end      { align-items: flex-end !important; }
    .align-sm-items-center   { align-items: center !important; }
    .align-sm-items-baseline { align-items: baseline !important; }
    .align-sm-items-stretch  { align-items: stretch !important; }

    .align-sm-content-start   { align-content: flex-start !important; }
    .align-sm-content-end     { align-content: flex-end !important; }
    .align-sm-content-center  { align-content: center !important; }
    .align-sm-content-between { align-content: space-between !important; }
    .align-sm-content-around  { align-content: space-around !important; }
    .align-sm-content-stretch { align-content: stretch !important; }

    .align-sm-self-auto     { align-self: auto !important; }
    .align-sm-self-start    { align-self: flex-start !important; }
    .align-sm-self-end      { align-self: flex-end !important; }
    .align-sm-self-center   { align-self: center !important; }
    .align-sm-self-baseline { align-self: baseline !important; }
    .align-sm-self-stretch  { align-self: stretch !important; }

    .mw-sm-100 { max-width: 100% !important; }
    .mh-sm-100 { max-height: 100% !important; }     
    
    .w-sm-auto { width: auto !important; }
    .w-sm-25 { width: 25% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-75 { width: 75% !important; }
    .w-sm-100 { width: 100% !important; }

    .align-sm-baseline    { vertical-align: baseline !important; } 
    .align-sm-top         { vertical-align: top !important; }
    .align-sm-middle      { vertical-align: middle !important; }
    .align-sm-bottom      { vertical-align: bottom !important; }
    .align-sm-text-bottom { vertical-align: text-bottom !important; }
    .align-sm-text-top    { vertical-align: text-top !important; }

    .visible-sm{
        visibility: visible;
    }
    .invisible-sm {
        visibility: hidden;
    }

    .float-sm-left { float: left!important;}
    .float-sm-right { float: right!important;}
    .float-sm-none { float: none!important;} 
   
    .mb-sm-20 {    margin-bottom: 20px; }
    .mb-sm-15 {    margin-bottom: 15px;}
    .mb-sm-10 {    margin-bottom: 10px;}
    .mb-sm-5 {    margin-bottom: 5px;}
    .mb-sm-2 {    margin-bottom: 2px;}
    .mt-sm-20 {    margin-top: 20px;}
    .mt-sm-15 {    margin-top: 15px;}
    .mt-sm-10 {    margin-top: 10px;}
    .mt-sm-5 {    margin-top: 5px;}
    .mt-sm-2 {    margin-top: 2px;}
    .ml-sm-20 {   margin-left: 20px;}
    .ml-sm-15 {    margin-left: 15px;}
    .ml-sm-10 {   margin-left: 10px;}
    .ml-sm-5 {    margin-left: 5px;}
    .ml-sm-2 {    margin-left: 2px;}
    .mr-sm-20 {    margin-right: 20px;}
    .mr-sm-15 {    margin-right: 15px;}
    .mr-sm-10 {   margin-right: 10px;}
    .mr-sm-5 {   margin-right: 5px;}
    .mr-sm-2 {    margin-right: 2px;}
    .mr-sm-0 {    margin-right: 0;}  

    .pl-sm-0 {     padding-left: 0px !important;}
    .pl-sm-6 {     padding-left: 6px !important;}
    .pl-sm-10 {    padding-left: 10px !important;}
    .pl-sm-50 {    padding-left: 50px !important;}

    .pr-sm-0 {     padding-right: 0px !important;}
    .pr-sm-6 {     padding-right: 6px !important;}
    .pr-sm-10 {    padding-right: 10px !important;}
    .pr-sm-50 {    padding-right: 50px !important;}

    .pt-sm-0 {     padding-top: 0px !important;}
    .pt-sm-6 {     padding-top: 6px !important;}
    .pt-sm-10 {    padding-top: 10px !important;}
    .pt-sm-50 {    padding-top: 50px !important;}

    .pb-sm-0 {     padding-bottom: 0px !important;}
    .pb-sm-6 {     padding-bottom: 6px !important;}
    .pb-sm-10 {    padding-bottom: 10px !important;}
    .pb-sm-50 {    padding-bottom: 50px !important;}

    .pb-sm-2 {     padding-bottom: 2px !important;}
    .pt-sm-2 {     padding-top: 2px !important;}

    
    .bg-sm-transparent {
        background-color: transparent!important;
    }
    .position-sm-relative {
        position: relative !important;
    }
    .position-sm-static {
        position: static !important;
    }
    .text-sm-left {
        text-align: left!important;;
    }
    .text-sm-right {
        text-align: right!important;;
    }
    .text-sm-center {
        text-align: center!important;;
    }
}

@media (min-width: 1024px) {
    .modal-dialog {
        width: 900px;
    }
}


@media (min-width: 768px) {
    .pull-right-sm {
        float: right!important;
    }
    .pull-left-sm {
        float: left!important;
    }
    
}


@media (max-width: 767px) {
    .pull-right-xs {
        float: right!important;
    }
    .pull-left-xs {
        float: left!important;
    }
    .d-xs-none         { display: none !important; }
    .d-xs-inline       { display: inline !important; }
    .d-xs-inline-block { display: inline-block !important; }
    .d-xs-block        { display: block !important; }
    .d-xs-table        { display: table !important; }
    .d-xs-table-row    { display: table-row !important; }
    .d-xs-table-cell   { display: table-cell !important; }
    .d-xs-flex         { display: flex !important; }
    .d-xs-inline-flex  { display: inline-flex !important; }


    .flex-xs-row            { flex-direction: row !important; }
    .flex-xs-column         { flex-direction: column !important; }
    .flex-xs-row-reverse    { flex-direction: row-reverse !important; }
    .flex-xs-column-reverse { flex-direction: column-reverse !important; }

    .flex-xs-wrap         { flex-wrap: wrap !important; }
    .flex-xs-nowrap       { flex-wrap: nowrap !important; }
    .flex-xs-wrap-reverse { flex-wrap: wrap-reverse !important; }

    .justify-xs-content-start   { justify-content: flex-start !important; }
    .justify-xs-content-end     { justify-content: flex-end !important; }
    .justify-xs-content-center  { justify-content: center !important; }
    .justify-xs-content-between { justify-content: space-between !important; }
    .justify-xs-content-around  { justify-content: space-around !important; }

    .align-xs-items-start    { align-items: flex-start !important; }
    .align-xs-items-end      { align-items: flex-end !important; }
    .align-xs-items-center   { align-items: center !important; }
    .align-xs-items-baseline { align-items: baseline !important; }
    .align-xs-items-stretch  { align-items: stretch !important; }

    .align-xs-content-start   { align-content: flex-start !important; }
    .align-xs-content-end     { align-content: flex-end !important; }
    .align-xs-content-center  { align-content: center !important; }
    .align-xs-content-between { align-content: space-between !important; }
    .align-xs-content-around  { align-content: space-around !important; }
    .align-xs-content-stretch { align-content: stretch !important; }

    .align-xs-self-auto     { align-self: auto !important; }
    .align-xs-self-start    { align-self: flex-start !important; }
    .align-xs-self-end      { align-self: flex-end !important; }
    .align-xs-self-center   { align-self: center !important; }
    .align-xs-self-baseline { align-self: baseline !important; }
    .align-xs-self-stretch  { align-self: stretch !important; }

    .mw-xs-100 { max-width: 100% !important; }
    .mh-xs-100 { max-height: 100% !important; }     
    
    .w-xs-auto { width: auto !important; }
    .w-xs-25 { width: 25% !important; }
    .w-xs-50 { width: 50% !important; }
    .w-xs-75 { width: 75% !important; }
    .w-xs-100 { width: 100% !important; }

    .align-xs-baseline    { vertical-align: baseline !important; } 
    .align-xs-top         { vertical-align: top !important; }
    .align-xs-middle      { vertical-align: middle !important; }
    .align-xs-bottom      { vertical-align: bottom !important; }
    .align-xs-text-bottom { vertical-align: text-bottom !important; }
    .align-xs-text-top    { vertical-align: text-top !important; }

    .visible-xs{
        visibility: visible!important;;
    }
    .invisible-xs {
        visibility: hidden!important;;
    }

    .float-xs-left { float: left!important;}
    .float-xs-right { float: right!important;}
    .float-xs-none { float: none!important;} 

    .mb-xs-20 {    margin-bottom: 20px; }
    .mb-xs-15 {    margin-bottom: 15px;}
    .mb-xs-10 {    margin-bottom: 10px;}
    .mb-xs-5 {    margin-bottom: 5px;}
    .mb-xs-2 {    margin-bottom: 2px;}
    .mt-xs-20 {    margin-top: 20px;}
    .mt-xs-15 {    margin-top: 15px;}
    .mt-xs-10 {    margin-top: 10px;}
    .mt-xs-5 {    margin-top: 5px;}
    .mt-xs-2 {    margin-top: 2px;}
    .ml-xs-20 {   margin-left: 20px;}
    .ml-xs-15 {    margin-left: 15px;}
    .ml-xs-10 {   margin-left: 10px;}
    .ml-xs-5 {    margin-left: 5px;}
    .ml-xs-2 {    margin-left: 2px;}
    .mr-xs-20 {    margin-right: 20px;}
    .mr-xs-15 {    margin-right: 15px;}
    .mr-xs-10 {   margin-right: 10px;}
    .mr-xs-5 {   margin-right: 5px;}
    .mr-xs-2 {    margin-right: 2px;}
    .mr-xs-0 {    margin-right: 0;}  

    .pl-xs-0 {     padding-left: 0px !important;}
    .pl-xs-6 {     padding-left: 6px !important;}
    .pl-xs-10 {    padding-left: 10px !important;}
    .pl-xs-50 {    padding-left: 50px !important;}

    .pr-xs-0 {     padding-right: 0px !important;}
    .pr-xs-6 {     padding-right: 6px !important;}
    .pr-xs-10 {    padding-right: 10px !important;}
    .pr-xs-50 {    padding-right: 50px !important;}

    .pt-xs-0 {     padding-top: 0px !important;}
    .pt-xs-6 {     padding-top: 6px !important;}
    .pt-xs-10 {    padding-top: 10px !important;}
    .pt-xs-50 {    padding-top: 50px !important;}

    .pb-xs-0 {     padding-bottom: 0px !important;}
    .pb-xs-6 {     padding-bottom: 6px !important;}
    .pb-xs-10 {    padding-bottom: 10px !important;}
    .pb-xs-50 {    padding-bottom: 50px !important;}

    .pb-xs-2 {     padding-bottom: 2px !important;}
    .pt-xs-2 {     padding-top: 2px !important;}

    .text-xs-left {text-align: left;}
    .text-xs-right {text-align: right;}
    .text-xs-center {  text-align: center;}
    .bg-xs-transparent {
        background-color: transparent!important;
    }
    .position-xs-relative {
        position: relative !important;
    }
    .position-xs-static {
        position: static !important;
    }
    .scrolling-xs-wrapper{
        overflow-x: auto!important;
    }
    .daterangepicker.dropdown-menu.show-calendar {
        min-width: 255px;
    }
}
@media (max-width: 549px) {
    .pull-right-xxs {
        float: right!important;
    }
    .pull-left-xxs {
        float: left!important;
    }
    .col-xxs-auto{ width: auto !important }
    .col-xxs-1{ width: 8.33333333% !important}
    .col-xxs-2{ width: 16.66666667% !important}
    .col-xxs-3{ width: 25% !important}
    .col-xxs-4{ width: 33.33333333% !important}
    .col-xxs-5{ width: 41.66666667% !important}
    .col-xxs-6{ width: 50% !important}
    .col-xxs-7{ width: 58.33333333% !important}
    .col-xxs-8{ width:66.66666667% !important}
    .col-xxs-9{ width: 75% !important}
    .col-xxs-10{ width: 83.33333333% !important}
    .col-xxs-11{ width: 91.66666667% !important}
    .col-xxs-12{ width: 100% !important}

    .d-xxs-none         { display: none !important; }
    .d-xxs-inline       { display: inline !important; }
    .d-xxs-inline-block { display: inline-block !important; }
    .d-xxs-block        { display: block !important; }
    .d-xxs-table        { display: table !important; }
    .d-xxs-table-row    { display: table-row !important; }
    .d-xxs-table-cell   { display: table-cell !important; }
    .d-xxs-flex         { display: flex !important; }
    .d-xxs-inline-flex  { display: inline-flex !important; }


    .flex-xxs-row            { flex-direction: row !important; }
    .flex-xxs-column         { flex-direction: column !important; }
    .flex-xxs-row-reverse    { flex-direction: row-reverse !important; }
    .flex-xxs-column-reverse { flex-direction: column-reverse !important; }

    .flex-xxs-wrap         { flex-wrap: wrap !important; }
    .flex-xxs-nowrap       { flex-wrap: nowrap !important; }
    .flex-xxs-wrap-reverse { flex-wrap: wrap-reverse !important; }

    .justify-xxs-content-start   { justify-content: flex-start !important; }
    .justify-xxs-content-end     { justify-content: flex-end !important; }
    .justify-xxs-content-center  { justify-content: center !important; }
    .justify-xxs-content-between { justify-content: space-between !important; }
    .justify-xxs-content-around  { justify-content: space-around !important; }

    .align-xxs-items-start    { align-items: flex-start !important; }
    .align-xxs-items-end      { align-items: flex-end !important; }
    .align-xxs-items-center   { align-items: center !important; }
    .align-xxs-items-baseline { align-items: baseline !important; }
    .align-xxs-items-stretch  { align-items: stretch !important; }

    .align-xxs-content-start   { align-content: flex-start !important; }
    .align-xxs-content-end     { align-content: flex-end !important; }
    .align-xxs-content-center  { align-content: center !important; }
    .align-xxs-content-between { align-content: space-between !important; }
    .align-xxs-content-around  { align-content: space-around !important; }
    .align-xxs-content-stretch { align-content: stretch !important; }

    .align-xxs-self-auto     { align-self: auto !important; }
    .align-xxs-self-start    { align-self: flex-start !important; }
    .align-xxs-self-end      { align-self: flex-end !important; }
    .align-xxs-self-center   { align-self: center !important; }
    .align-xxs-self-baseline { align-self: baseline !important; }
    .align-xxs-self-stretch  { align-self: stretch !important; }

    .mw-xxs-100 { max-width: 100% !important; }
    .mh-xxs-100 { max-height: 100% !important; }     
    
    .w-xxs-auto { width: auto !important; }
    .w-xxs-25 { width: 25% !important; }
    .w-xxs-50 { width: 50% !important; }
    .w-xxs-75 { width: 75% !important; }
    .w-xxs-100 { width: 100% !important; }

    .align-xxs-baseline    { vertical-align: baseline !important; } 
    .align-xxs-top         { vertical-align: top !important; }
    .align-xxs-middle      { vertical-align: middle !important; }
    .align-xxs-bottom      { vertical-align: bottom !important; }
    .align-xxs-text-bottom { vertical-align: text-bottom !important; }
    .align-xxs-text-top    { vertical-align: text-top !important; }

    .visible-xxs{
        visibility: visible;
    }
    .invisible-xxs {
        visibility: hidden;
    }

    .float-xxs-left { float: left!important;}
    .float-xxs-right { float: right!important;}
    .float-xxs-none { float: none!important;} 

    .mb-xxs-20 {    margin-bottom: 20px; }
    .mb-xxs-15 {    margin-bottom: 15px;}
    .mb-xxs-10 {    margin-bottom: 10px;}
    .mb-xxs-5 {    margin-bottom: 5px;}
    .mb-xxs-2 {    margin-bottom: 2px;}
    .mt-xxs-20 {    margin-top: 20px;}
    .mt-xxs-15 {    margin-top: 15px;}
    .mt-xxs-10 {    margin-top: 10px;}
    .mt-xxs-5 {    margin-top: 5px;}
    .mt-xxs-2 {    margin-top: 2px;}
    .ml-xxs-20 {   margin-left: 20px;}
    .ml-xxs-15 {    margin-left: 15px;}
    .ml-xxs-10 {   margin-left: 10px;}
    .ml-xxs-5 {    margin-left: 5px;}
    .ml-xxs-2 {    margin-left: 2px;}
    .mr-xxs-20 {    margin-right: 20px;}
    .mr-xxs-15 {    margin-right: 15px;}
    .mr-xxs-10 {   margin-right: 10px;}
    .mr-xxs-5 {   margin-right: 5px;}
    .mr-xxs-2 {    margin-right: 2px;}
    .mr-xxs-0 {    margin-right: 0;} 

    .pl-xxs-0 {     padding-left: 0px !important;}
    .pl-xxs-6 {     padding-left: 6px !important;}
    .pl-xxs-10 {    padding-left: 10px !important;}
    .pl-xxs-50 {    padding-left: 50px !important;}

    .pr-xxs-0 {     padding-right: 0px !important;}
    .pr-xxs-6 {     padding-right: 6px !important;}
    .pr-xxs-10 {    padding-right: 10px !important;}
    .pr-xxs-50 {    padding-right: 50px !important;}

    .pt-xxs-0 {     padding-top: 0px !important;}
    .pt-xxsxs-6 {     padding-top: 6px !important;}
    .pt-xxs-10 {    padding-top: 10px !important;}
    .pt-xxs-50 {    padding-top: 50px !important;}

    .pb-xxs-0 {     padding-bottom: 0px !important;}
    .pb-xxs-6 {     padding-bottom: 6px !important;}
    .pb-xxs-10 {    padding-bottom: 10px !important;}
    .pb-xxs-50 {    padding-bottom: 50px !important;}

    .pb-xxs-2 {     padding-bottom: 2px !important;}
    .pt-xxs-2 {     padding-top: 2px !important;}

    .text-xxs-left {text-align: left;}
    .text-xxs-right {text-align: right;}
    .text-xxs-center {  text-align: center;}

    .bg-xxs-transparent {
        background-color: transparent!important;
    }
    .position-xxs-relative {
        position: relative !important;
    }
    .position-xxs-static {
        position: static !important;
    }
    .scrolling-xxs-wrapper{
        overflow-x: auto!important;
    }
    .daterangepicker.dropdown-menu.show-calendar {
        min-width: 255px;
    }
}
 
.loading.segment:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100%;
    border-radius: .28571429rem;
    z-index: 100;
}

.loading.segment:after {
    position: absolute;
    content: '';
    top: 30%;
    left: calc(50% - 1.5em);
    width: 3em;
    height: 3em;
    border-radius: 500rem;
    border-color: #767676 rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: .2em;
    -webkit-box-shadow: 0 0 0 1px transparent;
    box-shadow: 0 0 0 1px transparent;
    visibility: visible;
    z-index: 101;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-group .form-control {
    border-radius: 3px;
}

.border-top {
    border-top: 1px solid #E2E4E9;
}

.border-primary {
    border-color: #3c8dbc !important;
}

.border-warning {
    border-color: #ffc107;
}

.border-danger {
    border-color: #dc3545;
}

/* ThailandAddress component styles */
.form-control {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-color: #d2d6de !important;
}

.form-control:focus {
    border-color: #3c8dbc !important;
    box-shadow: none !important;
}

.disabled_address {
    background-color: #999 !important;
}

.form-control:disabled {
    background-color: #f1f1f1 !important;
}

.border-danger {
    border-color: #dc3545 !important;
}

.is-invalid {
    border-color: #dc3545 !important;
}

.btn-outline-danger {
    color: #dc3545;
    background-color: #fff;
    background-image: none;
    border-color: #dc3545;
}

.btn-outline-danger.btn:focus {
    color: #dc3545;
}

.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545;
    border-color: #dc3545;
}

.vuetable-body-wrapper {
    overflow-x: auto;
}

.vuetable {
    min-width: 800px;
}

.cursor-pointer {
    cursor: pointer;
}


/* ----------Start CSS By Matee ------------------*/

table.table-bordered th {
    white-space: nowrap;
    position: relative;
    ;
}

table.table-bordered th>i.sort-icon {
    position: absolute !important;
    right: 8px;
}

table.dataTable thead>tr>th {
    padding-right: 8px;
}

table.dataTable thead>tr>th.sortable {
    padding-right: 30px;
}

table.table-bordered td {
    white-space: nowrap;
}

table.table-bordered td .btn,
table.table-bordered td .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 2px;
}

table.table-bordered td .btn i {
    font-size: 10px;
}


/* table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
} */

.open>.dropdown-toggle.btn-default,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover,
.dropdown-toggle.btn-default:hover {
    color: #fff;
    background-color: #508CB8;
    border-color: #508CB8;
}

.dropdown-toggle.btn-default:focus {
    color: inherit;
    border-color: #ddd;
    background-color: #f4f4f4;
}


/* .dropdown-toggle.btn-default:active:focus,
.dropdown-toggle.btn-default:focus-visible, */

.btn:active:focus,
.btn:focus-visible {
    /* outline: -webkit-focus-ring-color auto 1px; */
    outline: none;
}

.dropdown-menu {
    box-shadow: 0 5px 5px rgb(0 0 0 / 25%);
}

.dropdown-menu>li>a {
    color: #333;
}

.dropdown-menu>li>a:hover {
    background-color: #508CB8;
    color: #fff;
}

.btn-filter,
.btn-outline-primary {
    color: #508CB8;
    background-color: #fff;
    border-color: #508CB8;
}

.btn-filter:focus,
.btn-outline-primary:focus {
    color: #508CB8;
}

.btn-filter:hover,
.btn-outline-primary:hover,
.btn-filter:active,
.btn-filter.hover {
    color: #fff;
    background-color: #508CB8;
    border-color: #508CB8;
}

.checkbox input[type=checkbox] {
    margin-left: -30px;
    margin-top: 6px;
}

.checkbox label,
.radio label {
    padding-left: 30px;
}

.modal h4.modal-title {
    color: #111;
    font-size: 20px;
}

.modal-footer .btn+.btn {
    margin-left: 10px;
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    border: 1px solid #d2d6de;
    border-radius: 0;
    padding: 6px 0px;
    height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    width: 450px;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
}

.preview-image {
    position: relative;
    margin: 20px auto;
    width: 300px;
    text-align: center;
}

.preview-image img {
    max-width: 100%;
}

.remove-image {
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.filename {
    text-decoration: underline;
    color: #3C8DBC;
    font-weight: 400;
}

.amount {
    display: flex;
    flex-wrap: wrap;
}

.amount .box {
    border-radius: 3px;
    position: relative;
    margin-bottom: 15px;
    width: 185px;
    /* height: 102px; */
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.amount .box .box-body {
    border-radius: 3px 3px 0 0;
}

.amount .box .box-body h4 {
    margin-top: 0;
}

.amount .box .box-body .pull-right {
    position: absolute;
    right: 10px;
    top: 15px;
}

.amount .box p {
    font-size: 12px;
    margin-bottom: 0;
    color: #111;
}

.amount .box img {
    /* margin-top: 10px; */
    height: 30px;
    width: auto;
}

.amount .box .box-footer {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: #46A2C7;
    color: #fff;
    padding: 7px 10px;
    font-size: 12px;
}

.amount .box .box-footer a {
    color: #fff;
}

.amount .box .box-footer a:hover {
    text-decoration: underline;
}

.amount .box .box-footer i {
    margin-left: 5px;
}


/* .amount .box .icon {
    margin-top: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
} */

.amount .box .icon {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    float: none !important;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 15px;
}

.amount .box .icon.bg-primary {
    background-color: #46A2C7;
}

.amount .box.box-yellow .box-body {
    background-color: #f2f1df;
}

.amount .box.box-yellow .box-footer {
    background-color: #f5ec69;
    color: #000;
}

.amount .box.box-yellow .box-footer a {
    color: #000;
}

.amount .box.box-yellow-more .box-body {
    background-color: #f3edd5;
}

.amount .box.box-yellow-more .box-footer {
    background-color: #ffcc00;
    color: #111;
}

.amount .box.box-yellow-more .box-footer a {
    color: #111;
}

.amount .box.box-red .box-body {
    background-color: #f2e4e3;
}

.amount .box.box-red .box-footer {
    background-color: #f85a59;
}

.amount .box.box-red-more .box-body {
    background-color: #f2dedf;
}

.amount .box.box-red-more .box-footer {
    background-color: #ed444b;
}

.amount .box.box-dark-red .box-body {
    background-color: #FAFAFC;
}

.amount .box.box-dark-red .box-body .icon,
.amount .box.box-dark-red .box-body i {
    color: #fff;
}

.amount .box.box-dark-red .box-footer {
    background-color: #CE5642;
}

.amount .box.box-orange .box-body {
    background-color: #f4e2d6;
}

.amount .box.box-orange .box-footer {
    background-color: #f28445;
}

.box-yellow,
.box.box-solid.box-yellow {
    border: 1px solid #f5ee6a;
}

.box-yellow-more,
.box.box-solid.box-yellow-more {
    border: 1px solid #f9d43e;
}

.box-red,
.box.box-solid.box-red {
    border: 1px solid #f65b57;
}

.box-red-more,
.box.box-solid.box-red-more {
    border: 1px solid #ed424b;
}

.box-dark-red,
.box.box-solid.box-dark-red {
    border: 1px solid #CE5642;
}

.bg-dark-red {
    background-color: #CE5642;
}

.box-orange,
.box.box-solid.box-orange {
    border: 1px solid #f46f24;
}

.nav-tabs-custom {
    border-radius: 5px;
}

.nav-tabs-custom>.tab-content {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.nav-tabs-custom>.nav-tabs>li:first-child.active {
    border-top-left-radius: 5px;
}

.nav-tabs-custom>.nav-tabs>li>a {
    color: #333;
    font-size: 16px;
}

.nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li.active:hover>a {
    background-color: #fff;
    color: #333;
}

.color-white {
    color: #fff;
}

.box.simple-box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #E2E4E9;
    margin-bottom: 15px;
    width: 100%;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 5%);
}

.box.simple-box .box-header.with-border {
    border-bottom: 1px solid #E2E4E9;
}

.flex-container {
    display: flex;
}

.flex-container .flex-child {
    flex: 1;
}

.flex-container .flex-child:first-child {
    margin-right: 20px;
}

.flex-container .flex-child .box,
.flex-container .flex-child>div {
    height: calc(100% - 15px);
}

.col-container {
    display: table;
    width: 100%;
}

.col-container .col {
    display: table-cell;
    padding: 16px;
}

.col-container .col .box {
    height: 100%;
}

.display-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.display-flex-no-wrap {
    display: flex;
    flex-wrap: nowrap;
}

.dashboard .box-header {
    padding: 15px;
}

.dashboard .box-header .box-title {
    font-weight: 600;
    font-size: 16px;
    color: #222;
}

.dashboard .box-header .pull-right {
    position: absolute;
    top: 15px;
    right: 15px;
}

.dashboard .info-box {
    min-height: 80px;
    background: #fff;
    width: 219px;
    box-shadow: 0px 2px 3px rgb(0 0 0 / 5%);
    border: 1px solid #E2E4E9;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 0;
    padding: 7px;
    margin-right: 10px;
}

.dashboard .info-box.mr-0 {
    margin-right: 0;
}

.dashboard .info-box-icon {
    color: #fff;
    border-radius: 5px;
    display: block;
    float: left;
    height: 64px;
    width: 70px;
    text-align: center;
    font-size: 32px;
    line-height: 64px;
    background: rgba(0, 0, 0, 0.2);
}

.dashboard .info-box-content {
    padding: 5px 10px;
    margin-left: 70px;
}

.dashboard .info-box-text {
    display: block;
    font-size: 14px;
    text-transform: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard .info-box-number {
    display: block;
    font-weight: bold;
    font-size: 18px;
    margin-top: 10px;
}

.chart .nav-tabs-custom {
    box-shadow: none;
    border-radius: 0;
}

.chart .nav-tabs-custom>.nav-tabs {
    border-bottom: 0;
    border-radius: 0;
}

.chart .nav-tabs-custom>.nav-tabs>li>a {
    color: #333;
    border-radius: 0;
    border-width: 0;
}

.chart .nav-tabs-custom>.nav-tabs>li>a:hover {
    color: #2F80ED;
}

.chart .nav-tabs-custom>.nav-tabs>li {
    border-top: 0;
}

.chart .nav-bt .btn {
    background-color: #fff;
    color: #333;
    border-radius: 3px;
    font-size: 12PX;
}

.chart .nav-bt .bg-default {
    background-color: #F3F5F8;
}

.text-blue {
    color: #2D7DF6;
}

.btn-blue {
    background-color: #2F80ED;
    border-color: #2F80ED;
    color: #fff;
}

.bg-default {
    background-color: #F3F5F8;
}

.legend-custom {
    list-style: none;
    margin: 15px 0;
    padding: 0;
    text-align: center;
}

.legend-custom li {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}

.legend-custom li .i-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

ul.custom-legend {
    text-align: center;
    padding: 0;
    margin: 10px;
}

ul.custom-legend li {
    display: inline-block;
    float: none;
    text-align: center;
    margin: 0 15px;
    padding: 0 5px;
}

ul.custom-legend li .l-label {
    font-size: 14px;
}

ul.custom-legend li .l-value {
    font-size: 16px;
    font-weight: 600;
    margin-top: 5px;
}

ul.custom-legend li .l-marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-right: 5px;
}

ul.custom-legend.pull-right {
    text-align: center;
    margin-top: 30px;
}

ul.custom-legend.pull-right li {
    display: inherit;
    float: none;
    text-align: left;
    margin: 15px 10px;
    padding: 0;
}

ul.custom-legend.pull-right li>div {
    display: inline;
}
  
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
  }
  
  input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
  }
  
  input[type="search"].dark::-webkit-search-cancel-button {
    filter: invert(1);
  }

.morris svg text {
    font-family: inherit !important;
    transform: none !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

.morris svg text:last-child {
    font-size: 26px !important;
    transform: translateY(10px) !important;
}


/* ----------End CSS By Matee ------------------*/

.sidebar-menu li>a>.fa-angle-right {
    transform: rotate( 0deg);
    transition: 50ms;
    text-align: center;
}

.sidebar-menu li.active>a>.fa-angle-right {
    transform: rotate( 90deg);
}


/* loader */

.placeholder-content {
    height: 205px;
    overflow: hidden;
    background: #000;
    position: relative;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: placeholderAnimate;
    background: #f6f7f8;
    background: linear-gradient(to right, #eee 2%, #ddd 18%, #eee 33%);
    background-size: 1300px;
}

.placeholder-content_item {
    width: 100%;
    height: 20px;
    position: absolute;
    background: #fff;
    z-index: 2;
}

.placeholder-content_item:after,
.placeholder-content_item:before {
    width: inherit;
    height: inherit;
    content: '';
    position: absolute;
}

.placeholder-content_item:nth-child(1) {
    top: 0;
    left: 0;
}

.placeholder-content_item:nth-child(4) {
    top: 20px;
    width: 20px;
    left: 170px;
    height: 90px;
}

.placeholder-content_item:nth-child(5) {
    top: 40px;
    left: 190px;
    height: 12px;
}

.placeholder-content_item:nth-child(6) {
    top: 75px;
    left: 190px;
    height: 12px;
}

.placeholder-content_item:nth-child(7) {
    top: 20px;
    right: 0;
    width: 0%;
    height: 20px;
}

.placeholder-content_item:nth-child(9) {
    top: 110px;
    height: 17px;
    left: 0;
}

.placeholder-content_item:nth-child(10) {
    top: 149px;
    height: 12px;
    left: 0;
}

.placeholder-content_item:nth-child(11) {
    top: 183px;
    left: 0;
    height: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #444;
}

.timeline-inverse>li>.timeline-item {
    background: none;
    border: none;
}

.vuetable thead th {
    text-transform: capitalize;
}


/* Select2 */

.wrapper .select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    padding-left: 6px;
    padding-right: 6px;
}

.wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2;
}

.wrapper .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 15px;
}


/* End Select2 */

@keyframes placeholderAnimate {
    0% {
        background-position: -650px 0;
    }
    100% {
        background-position: 650px 0;
    }
}

.spinning {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.break-spaces {
    white-space: break-spaces;
}


/* Promotion Page */

.promotions .select2-container--default .select2-selection--single {
    padding: 6px 12px;
    line-height: 24px;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    background: #EDF0F4;
}

.modal-body .vuetable {
    min-width: 100%;
}

.promotions .select2.select2-container {
    max-width: 100%;
}

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

.promotions .select2-results__option {
    padding: 6px 12px;
}

.input-group.disable-field .input-group-addon {
    background-color: #F2F2F2;
}

.daterangepicker.dropdown-menu.show-calendar.topright {top: 20px !important;right: 330px !important;}

@media (min-width: 992px) {
    .modal-lg {
        width: 972px;
    }
    .d-lg-none         { display: none !important; }
    .d-lg-inline       { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-table        { display: table !important; }
    .d-lg-table-row    { display: table-row !important; }
    .d-lg-table-cell   { display: table-cell !important; }
    .d-lg-flex         { display: flex !important; }
    .d-lg-inline-flex  { display: inline-flex !important; }
}


/* support input-group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .custom-select,
.input-group > .custom-file {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file:focus {
    z-index: 3;
}

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
    margin-left: -1px;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .custom-file {
    display: flex;
    align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .custom-file:not(:first-child) .custom-file-label,
.input-group > .custom-file:not(:first-child) .custom-file-label::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
    position: relative;
    z-index: 2;
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
    margin-left: -1px;
}

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
    margin-top: 0;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group
    > .input-group-append:last-child
    > .btn:not(:last-child):not(.dropdown-toggle),
.input-group
    > .input-group-append:last-child
    > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group
    > .input-group-prepend:first-child
    > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .input-group-addon {
    min-width: 38px;
  }

.input-group-addon, .input-group-btn {
    width: auto;
}

/* Reusable loading overlay styles - can be used by any modal */
.modal-loading-overlay {
  position: relative;
}

.modal-loading-spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.modal-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007bff;
  font-size: 16px;
  font-weight: 500;
}

/* User View Styles */
.box {
  margin-bottom: 20px;
}

.box-header.with-border {
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 15px;
}

.box-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.p-status {
  font-size: 14px;
  color: #666;
}

.p-status i {
  margin-right: 5px;
}

.text-green {
  color: #00a65a !important;
}

.text-gray {
  color: #999 !important;
}

.margin {
  margin: 15px;
}

.badge {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

strong {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

p {
  margin: 0;
  color: #666;
  line-height: 1.4;
}

/* ===========================================
   AdminLTE Select2 Styles - Complete
   =========================================== */
.custom-section .select2-container--default.select2-container--focus,
.custom-section .select2-selection.select2-container--focus,
.custom-section .select2-container--default:focus,
.custom-section .select2-selection:focus,
.custom-section .select2-container--default:active,
.custom-section .select2-selection:active {
  outline: none;
}

.custom-section .select2-container--default .select2-selection--single,
.custom-section .select2-selection .select2-selection--single {
  border: 1px solid #d2d6de;
  border-radius: 0 !important;
  padding: 2px 6px;  /* ลด padding เพิ่ม */
  height: 26px;      /* ลด height เพิ่ม */
  background: #fff;
  font-size: 12px;   /* ลด font-size เพิ่ม */
  cursor: pointer;   /* เพิ่ม cursor pointer */
}

.custom-section .select2-container--default.select2-container--open {
  border-color: #d2d6de;  /* เปลี่ยนเป็นสีเทา */
}

.custom-section .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #d2d6de;  /* เปลี่ยนเป็นสีเทา */
  box-shadow: none;
  outline: 0;
}

.custom-section .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  padding-right: 8px;  /* ลด padding-right */
  height: auto;
  margin-top: -2px;   /* ปรับ margin-top */
  color: #555;
  line-height: 16px;  /* ลด line-height */
}

.custom-section .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  padding-right: 6px;
  padding-left: 20px;
}

.custom-section .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
  font-style: italic;
}

.custom-section .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 22px;  /* ลด height เพิ่ม */
  right: 3px;
  top: 1px;
}

.custom-section .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #555 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 3px 0 3px;  /* ลดขนาด arrow */
  height: 0;
  left: 50%;
  margin-left: -3px;  /* ปรับ margin */
  margin-top: 0;
  position: absolute;
  top: 50%;
  width: 0;
}

.custom-section .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #555 transparent;
  border-width: 0 4px 5px 4px;
}

.custom-section .select2-dropdown {
  border: 1px solid #d2d6de;
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3c8dbc;
  color: white;
}

.custom-section .select2-results__option {
  padding: 6px 12px;
  user-select: none;
  -webkit-user-select: none;
  font-size: 14px;
  background: #fff;
  color: #555;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd;
  color: #444;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true]:hover {
  color: #444;
}

.custom-section .select2-dropdown .select2-search__field,
.custom-section .select2-search--inline .select2-search__field {
  /* border: 1px solid #d2d6de; */
  margin-left: 10px;
  border-radius: 0 !important;
  /* padding: 2px 6px;  ลด padding */
  font-size: 12px;   /* ลด font-size */
  height: 24px;      /* ลด height */
}

.custom-section .select2-dropdown .select2-search__field:focus,
.custom-section .select2-search--inline .select2-search__field:focus {
  margin-left: 5px;
  outline: none;
  border: unset;  /* เปลี่ยนเป็นสีเทาแทนสีฟ้า */
}

.custom-section .select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999;
}

/* Multiple Selection Styles */
.custom-section .select2-container--default .select2-selection--multiple {
  border: 1px solid #d2d6de;
  border-radius: 0 !important;
  background: #fff;
  font-size: 12px;  /* ลด font-size */
  min-height: 26px;  /* ลด min-height */
  cursor: pointer;   /* เพิ่ม cursor pointer */
}

.custom-section .select2-container--default .select2-selection--multiple:focus {
  border-color: #d2d6de;  /* เปลี่ยนเป็นสีเทา */
}

.custom-section .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #d2d6de;
}

.custom-section .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #3c8dbc;
  border-color: #367fa9;
  padding: 4px 5px;  /* ลด padding */
  color: #fff;
  border-radius: 0;
  margin: 5px 0 1px 3px;  /* ลด margin */
  font-size: 11px;  /* ลด font-size */
  line-height: 14px;  /* ลด line-height */
}

.custom-section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-weight: bold;
}

.custom-section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
}

.custom-section .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 4px;
  line-height: 24px;
}

.custom-section .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #999;
  font-style: italic;
  margin-top: 2px;
}

/* Select2 in modal adjustments */
.custom-section .modal .select2-container--default .select2-selection--single,
.custom-section .modal .select2-container--default .select2-selection--multiple {
  border-radius: 0 !important;
}

.custom-section .modal .select2-dropdown {
  z-index: 1051; /* Above modal */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .custom-section .select2-container--default .select2-selection--single,
  .custom-section .select2-selection .select2-selection--single,
  .custom-section .select2-container--default .select2-selection--multiple {
    font-size: 11px;  /* ลด font-size สำหรับ mobile */
    height: 24px;     /* ลด height สำหรับ mobile */
    padding: 2px 4px; /* ลด padding สำหรับ mobile */
  }

  .custom-section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px;  /* ลด arrow height สำหรับ mobile */
  }

  .custom-section .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 10px;  /* ลด font-size สำหรับ mobile */
    padding: 0px 4px; /* ลด padding สำหรับ mobile */
  }

  .custom-section .select2-dropdown .select2-search__field,
  .custom-section .select2-search--inline .select2-search__field {
    height: 22px;     /* ลด height สำหรับ mobile */
    padding: 2px 4px; /* ลด padding สำหรับ mobile */
  }
}