.loader {
    color: #ff20ff;
    font-size: 26px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load4 {
    0%, 100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes load4 {
    0%, 100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

table, tr, td {
    /*vertical-align: middle;*/
    font-family: Tahoma,'Times New Roman',sans-serif;
}

    table.dataTable thead > tr > th {
        padding-right: 10px;
        text-align: center;
        vertical-align: middle;
        background-color: lightblue;
        border-right-width: 1px;
        border-bottom-width: 1px;
    }

    table.table-bordered th:last-child, table.table-bordered td:last-child {
        border-right-width: 1px;
    }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden], template {
    display: none;
}

/* Set ไม่ต้องแสดง Header Dialog-modal เพราะ button มีพบกระทบกับ Boostap.JS*/
.ui-dialog-titlebar {
    display: none;
}
.body{
    padding-right:0px;

}
/*.body {
    font-family: Tahoma,'Times New Roman',sans-serif;
    font-size: 14px;
    margin: 0px auto 0px auto;
    min-width: 1300px;
    max-width: 1450px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /*ทำเพจหน้าเทา*/
/*-moz-filter: grayscale(100%);*/
/*-webkit-filter: grayscale(100%);*/
/*filter: gray;*/ /* IE6-9 */
/*filter: grayscale(100%);*/
}

*/ .body-popup {
    font-family: Tahoma,'Times New Roman',sans-serif;
    font-size: 14px;
    /*margin: 0px auto 0px auto;*/
    /*min-width: 1300px;*/
    /*width: 800px;*/
    height: 100%;
    /*position: absolute;*/
    /*top: 0;
    left: 0;
    right: 0;*/
}

div {
    /*  font-family: Tahoma,'Times New Roman',sans-serif;
    font-size: 14px;*/
    /*margin: 0px auto 0px auto;*/
    /*ทำเพจหน้าเทา*/
    /*-moz-filter: grayscale(100%);*/
    /*-webkit-filter: grayscale(100%);*/
    /*filter: gray;*/ /* IE6-9 */
    /*filter: grayscale(100%);*/
}

form {
    /*font-family: Tahoma,'Times New Roman',sans-serif;
    font-size: 14px;
    margin: 0px auto 0px auto;
    width: 100%;
    height: 100%;*/
    /*ทำเพจหน้าเทา*/
    /*-moz-filter: grayscale(100%);*/
    /*-webkit-filter: grayscale(100%);*/
    /*filter: gray;*/ /* IE6-9 */
    /*filter: grayscale(100%);*/
}

.InVisible {
    display: none;
}

.center {
    margin: 0px auto 0px auto;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

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

.align-top {
    vertical-align: top;
}
.dialog-modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    -moz-opacity: 0.8;
    min-height: 100%;
    /*width: 100%;*/
    /*height: 100%;*/
    text-align: center;
    vertical-align: middle;
}
.modal-ld {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.loading {
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

.file-upload {
    /*overflow: hidden;*/
    /*display: inline-block;*/
    position: relative;
    /*vertical-align: middle;*/
    text-align: center;
    /* Cosmetics */
    /*border: 1px solid #cfcfcf;*/
    background: #e2e2e2;
    /* Nice if your browser can do it */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

    .file-upload:hover {
        background: #acfa52;
        background-image: -webkit-linear-gradient(top, #acfa52, #4dcf02);
        background-image: -moz-linear-gradient(top, #acfa52, #4dcf02);
        background-image: -ms-linear-gradient(top, #acfa52, #4dcf02);
        background-image: -o-linear-gradient(top, #acfa52, #4dcf02);
        background-image: linear-gradient(to bottom, #acfa52, #4dcf02);
        text-decoration: none;
        /*border: solid #4dcf02 2px;*/
    }

    .file-upload.focus {
        outline: 1px solid yellow;
    }

    .file-upload input {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        font-size: 10pt;
        /* Loses tab index in webkit if width is set to 0 */
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .file-upload strong {
        padding-top: 5px;
        font-size: 9pt;
        font-weight: normal;
    }

    .file-upload span {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        display: inline-block;
        /* Adjust button text vertical alignment */
        padding-top: 5px;
    }

/* Adjust the button size */
.file-upload {
    /*height: 22px;*/
}

    .file-upload,
    .file-upload span {
        width: 75px;
    }

a.dellink {
    color: #2980b9;
    font-weight: bold;
    text-decoration: none;
}

    a.dellink:hover {
        color: #e81e51;
        font-weight: bold;
        text-decoration: none;
    }

.dellink {
    color: #2980b9;
    font-weight: bold;
    text-decoration: none;
}

    .dellink:hover {
        color: #e81e51;
        font-weight: bold;
        text-decoration: none;
    }

/* btn Style*/
.btn-img {
    padding: 2px 2px 2px 2px;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

    .btn-img:hover {
        padding: 2px 2px 2px 2px;
        opacity: 0.7;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

/* ใช้กับหน้าจอ */
.error {
    color: red;
}

.success {
    color: #049307;
}

.grid-view-main {
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
}

.grid-view-main-header {
    background-color: #0071BD;
    color: White;
    word-wrap: break-word;
    position: static;
    font: bold 16px tahoma, Helvetica, sans-serif;
    vertical-align: middle;
    height: 40px;
}

.grid-view-main-row {
    background-color: #f4e9e9;
    font: bold 14px tahoma, Helvetica, sans-serif;
    vertical-align: middle;
    min-height: 30px;
    max-height: 100px;
}

.alternatingRowStyle {
    background-color: #FFFFFF;
    font: bold 14px tahoma, Helvetica, sans-serif;
    vertical-align: middle;
    min-height: 30px;
    max-height: 100px;
}


.footerStyle {
    font: bold 16px tahoma, Helvetica, sans-serif;
    background-color: #3498db;
    vertical-align: middle;
    height: 30px;
}

.ul-li {
    font: bold 14px tahoma, Helvetica, sans-serif;
}

.div-body {
    /*background-color: #B2DFEE;*/
    background-color: #f2eded;
    /*width: 1050px;*/
    /*margin-top: 1%;*/
    width: 95%;
    min-height: 650px;
    /*border-left: 1px solid #AAAAAA;*/
    border-radius: 5px;
    /*overflow: inherit;*/
    /*opacity: 0.6;*/
    /*filter: alpha(opacity=40);*/
}

fieldset {
    /*font: bold 16px tahoma, Helvetica, sans-serif;*/
    font-family: tahoma, Helvetica, sans-serif;
    border: solid 1px green;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    /*border-radius: 5px;*/
    /*background: #009900;*/
}

.img-preview {
    /*font: bold 16px tahoma, Helvetica, sans-serif;*/
    /*border: solid 2px #e50a42;*/
    /*-webkit-border-radius: 10px;*/
    /*-moz-border-radius: 10px;*/
    /*border-radius: 10px;*/
    min-height: 400px;
    min-width: 700px;
    max-height: 95%;
    max-width : 95%;
    /*max-width: 700px;*/
    /*background: #009900;*/
}


/* Customize */
/*panel */
.panel-red {
    border-color: #FF1D25;
}

    .panel-red > .panel-heading {
        color: #fff;
        background-color: #FF1D25;
        border-color: #FF1D25;
    }

        .panel-red > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #FF1D25;
        }

    .panel-red > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #FF1D25;
    }

.panel-bluesky {
    border-color: #3FA9F5;
}

    .panel-bluesky > .panel-heading {
        color: #fff;
        background-color: #3FA9F5;
        border-color: #3FA9F5;
    }

        .panel-bluesky > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #3FA9F5;
        }

    .panel-bluesky > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #3FA9F5;
    }

.panel-greenligth {
    border-color: #7AC943;
}

    .panel-greenligth > .panel-heading {
        color: #fff;
        background-color: #7AC943;
        border-color: #7AC943;
    }

        .panel-greenligth > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #7AC943;
        }

    .panel-greenligth > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #7AC943;
    }


.panel-orangeligth {
    border-color: #FF931E;
}

    .panel-orangeligth > .panel-heading {
        color: #fff;
        background-color: #FF931E;
        border-color: #FF931E;
    }

        .panel-orangeligth > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #FF931E;
        }

    .panel-orangeligth > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #FF931E;
    }

.panel-purple {
    border-color: #652D92;
}

    .panel-purple > .panel-heading {
        color: #fff;
        background-color: #652D92;
        border-color: #652D92;
    }

        .panel-purple > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #652D92;
        }

    .panel-purple > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #652D92;
    }
/*background */
.bg-red {
    border-color: #FF1D25;
}

.bg-bluesky {
    background-color: #3FA9F5;
}

.bg-greenligth {
    background-color: #7AC943;
}

.bg-orangeligth {
    background-color: #FF931E;
}

.bg-purple {
    background-color: #652D92;
}

.bg-status-aj {
    background-color: #652D92;
}

.bg-status-aj {
    background-color: #FDEE21;
}

.bg-status-rq {
    background-color: #B3B3B3;
}

.bg-status-ck {
    background-color: #FBB03B;
}

.bg-status-ap {
    background-color: #8CC63E;
}