/*-- admin ajax loading --*/
span.ui-datepicker-year:not(.custom-thai-year) {
    display: none;
}
select.ui-datepicker-year {
    display: inline-block !important;
    float: right;
}
.ui-datepicker .ui-datepicker-title select,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    font-size: 0.8em;
}
/* adj font-size form in ui dialog */
.ui-dialog .pap-oform input[type="submit"],
.ui-dialog .pap-oform input[type="button"] {
    font-size: 14px;
}
.ui-dialog .pap-oform form:after {
    content: "";
    clear: both;
    display: block;
}
.ui-dialog .pap-oform form {
    margin-bottom: 15px;
}

body.mybox-showing {
    overflow: hidden;
}
.pg-loading-dialog {
    display: none;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    cursor: wait;
}
.ajax-dialog {
    display: inline-block;
    position: relative;
    top: 35%;
    height: 200px;
    width: 300px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);
}
.ajax-dialog h3 {
    text-align: left;
    padding: 7px;
    padding-left: 15px;
    background-color: #2977bc;
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-top: 0;
    margin-left: 0;
}
.ajax-gif {
    margin-top: 50px;
}
a.icon-delete-circle {
    text-decoration: none;
}
.graying {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}
/*------------------------------------------------------ ajax loading end ------------------------------------------------------ */
/*------------------------------------------------------ pg dialog-------------------------------------------------------------- */
.pg-dialog {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}
.pg-dialog > div {
    display: inline-block;
    position: relative;
    top: 35%;
    height: 200px;
    width: 300px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);
}
.pg-dialog h3 {
    text-align: left;
    padding: 7px;
    padding-left: 15px;
    background-color: #2977bc;
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom: 20px;
}
.pg-dialog h3 span {
    display: inline-block;
    padding-right: 10px;
}
.pg-dialog p {
    color: #444;
    font-size: 14px;
    padding: 5px 10px;
}
.pg-dialog .ok-but {
    position: absolute;
    width: 100%;
    bottom: 20px;
    text-align: center;
}
.pg-dialog .ok-but input {
    display: inline-block;
}
.confirm-dialog .ui-button-text {
    font-weight: 500;
    font-size: 14px;
}
.confirm-dialog .ui-dialog-content {
    font-weight: 500;
    font-size: 15px;
}
.confirm-dialog .ui-dialog-titlebar-close {
    display: none;
}
.error-dialog .ui-widget-header {
    background: #f87171;
    border: none;
}
/*------------------------------------------------------ pg dialog END-------------------------------------------------------------- */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.float-left {
    display: inline-block;
    float: left;
}
.float-right {
    display: inline-block;
    float: right;
}
.ovhid {
    overflow: hidden;
}
.no-scroll {
    overflow: hidden;
    height: 100%;
}
.ano-line:hover {
    text-decoration: none !important;
}
.cheight:after {
    content: "";
    clear: both;
    display: block;
}
.submit-error {
    padding-top: 15px;
    color: #ff5b42;
    font-size: 14px;
}
[class*="-hid-"] {
    display: none;
}
.form-hide {
    display: none !important;
}
.form-required {
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    width: 15px;
    font-size: 20px;
    font-weight: 600;
    color: #ff5b42;
}
[class*="del-"],
[class^="del-"] {
    color: #ff5b42;
    cursor: pointer;
}
select::-ms-expand {
    display: none;
}

.pap-oform select,
.pap-oform select:focus,
.pap-oform input[type="text"],
.pap-oform input[type="number"],
.pap-oform input[type="password"],
.pap-oform input[type="email"],
.pap-oform textarea,
.pap-oform input[type="text"]:focus,
.pap-oform input[type="number"]:focus,
.pap-oform input[type="password"]:focus,
.pap-oform input[type="email"]:focus,
.pap-oform textarea:focus {
    font-family: "Open Sans", sans-serif;
    outline-offset: 0;
    font-size: 14px;
}
select,
select:focus,
.pap-oform select,
.pap-oform select:focus {
    padding: 5px 25px 5px 5px;
    line-height: 25px;
    border: 1px solid rgb(200, 200, 200);
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: url(../image/arr_dwn.png) right / 25px no-repeat #ffffff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03);
    outline: none;
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
.pap-oform input[type="text"],
.pap-oform input[type="number"],
.pap-oform input[type="password"],
.pap-oform input[type="email"],
.pap-oform textarea {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 25px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgb(200, 200, 200);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
.pap-oform input[type="text"]:focus,
.pap-oform input[type="number"]:focus,
.pap-oform input[type="password"]:focus,
.pap-oform input[type="email"]:focus,
.pap-oform textarea:focus {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 25px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03);
    border: #0071bc solid 1px;
}
input[type="button"],
.gray-but,
input[type="button"]:focus,
.gray-but:focus {
    display: inline-block;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0)
        linear-gradient(
            to bottom,
            rgb(255, 255, 255) 1%,
            rgb(230, 230, 230) 100%
        )
        repeat scroll 0 0;
    border: 1px solid rgb(180, 180, 180);
    color: #333;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 8px 10px;
    outline: none;
}
input[type="button"]:not([disabled]):hover,
.gray-but:not([disabled]):hover {
    border-color: #444;
}
input[type="button"]:active,
.gray-but:active {
    border: 1px solid #d9d9d9;
    background: #efefef;
}
input[type="submit"],
.submit-like input[type="button"],
.blue-but {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #fff !important;
    font-weight: 600;
    background: rgba(0, 0, 0, 0)
        linear-gradient(to bottom, #0690cf 1%, #2977bc 100%) repeat scroll 0 0 !important;
    border: 1px solid #1597ce;
    border-radius: 3px;
    cursor: pointer;
    padding: 8px 10px;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="submit"]:not([disabled]):hover,
.submit-like input[type="button"]:not([disabled]):hover,
.blue-but:not([disabled]):hover {
    background: #2977bc !important;
    border-color: #0071bc !important;
}
input[type="submit"]:active,
.submit-like input[type="button"]:active,
.blue-but:active {
    background: #2977bc !important;
    border-color: #0071bc !important;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.red-but,
input[type="button"].red-but {
    display: inline-block;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #fff !important;
    font-weight: 600;
    background: #ff6e40 linear-gradient(to bottom, #ff7043 1%, #f4511e 100%)
        repeat scroll 0 0;
    border: 1px solid #f4511e;
    border-radius: 3px;
    cursor: pointer;
    padding: 8px 10px;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.red-but:not([disabled]):hover {
    background: #dd2c00 !important;
}
.red-but:active {
    background-color: #dd2c00 !important;
    border-color: #f4511e !important;
    position: relative;
    top: 1px;
    cursor: pointer;
}

input[type="submit"]:focus,
.submit-like input[type="button"]:focus {
    background-color: #29abe2;
    border: 1px solid #1597ce;
}
.div-nostyle {
    width: 100%;
}
.div-nostyle input,
.pg-input-nostyle {
    -webkit-border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    z-index: 2 !important;
    outline: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.but-right {
    float: right;
    width: 100%;
    text-align: right;
}
.but-right input {
    width: 100%;
}
.but-120 {
    min-width: 220px;
}
/*---------------------------------------------- pg-select end ----------------------------------------------------------*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /*safari and chrome*/
    select {
        line-height: 25px;
        /*background:#ffffff;*/
    }
}
select::-moz-focus-inner {
    /*Remove button padding in FF*/
    border: 0;
    padding: 0;
}
@-moz-document url-prefix() {
    /* targets Firefox only */
    select {
        padding: 8px 25px 7px 5px !important;
    }
}
@media screen\0 {
    /* IE Hacks: targets IE 8, 9 and 10 */
    select {
        height: 30px;
        line-height: 30px;
    }
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"] {
        padding-bottom: 7px;
    }
}
.but-div {
    text-align: right;
    margin-bottom: 20px;
}
.but-100 > input {
    width: 100%;
}
.label-inline,
.label-3070,
.label-5050,
.text-but,
.datetime-inline,
.datetime-3070 {
    margin-bottom: 12px;
    color: #333;
    float: left;
    width: 100%;
}
.label-5050 {
    padding-right: 10px;
    box-sizing: border-box;
}
.label-inline label,
.text-but label {
    display: inline-block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding-bottom: 5px;
    font-weight: 600;
}
.label-3070 > label,
.label-30,
.label-3070 .papform-check-lb,
.datetime-inline label,
.datetime-3070 label {
    display: inline-block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding-right: 15px;
    font-weight: 600;
    vertical-align: top;
}
.label-3070 .papform-check-lb {
    margin-bottom: 5px;
}
.label-3070 .checkbox-input {
    overflow: hidden;
    margin-top: 7px;
}
.label-5050 label {
    display: inline-block;
    width: 50%;
    text-align: right;
    box-sizing: border-box;
    padding-right: 15px;
    font-weight: 600;
}
.label-inline > input,
.label-inline > textarea,
.label-inline > select {
    resize: none;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 5px;
    text-align: left;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
    border: 1px solid rgb(200, 200, 200);
}
.label-inline > p {
    text-align: left;
}
.label-3070 input[type="file"] {
    border: none;
    box-shadow: none;
}
.label-3070 ul {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 5px;
    text-align: left;
    list-style: none;
}
.label-3070 ul li label {
    width: 90%;
    text-align: left;
    font-weight: 500;
    padding-left: 20px;
}
.label-5050 input,
.label-5050 textarea,
.label-5050 select {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    padding-left: 5px;
    text-align: left;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
    border: 1px solid rgb(200, 200, 200);
}
.input-30 {
    box-sizing: border-box;
    display: inline-block;
    width: 33%;
    padding-left: 5px;
}
.input-100 input,
.input-100 select {
    width: 100%;
}
.label-3070 > input,
.label-3070 > div > input:not([type="checkbox"]),
.label-3070 > textarea,
.label-3070 > select {
    width: 100%;
}
.label-3070 > input[type="checkbox"] {
    width: auto;
}
.label-inline > div:not(.input-hms, .pap-form-group) {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 5px;
    text-align: left;
}
div.pap-time-group input,
div.pap-time-group select {
    width: 40% !important;
}
.label-3070 > div,
.label-3070 > p,
.datetime-3070 > p {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    text-align: left;
}
.label-3070 > p,
.datetime-3070 > p {
    margin-top: 3px;
}
[class*="label-"] label,
[class*="datetime-"] label {
    font-size: 14px;
}
[class*="label-"] > p {
    font-size: 13px;
}
.text-but > input {
    width: 70%;
}
.text-but > div {
    display: inline-block;
    padding-left: 10px;
    box-sizing: border-box;
    width: 30%;
}
input.readonly,
input.readonly:focus,
textarea.readonly,
textarea.readonly:focus,
.readonly input,
.readonly input:focus,
.readonly textarea,
.readonly textarea:focus {
    background-color: #d9d9d9;
}
.readonly select,
.readonly select:focus {
    color: grey;
}
.input-check {
    margin-bottom: 20px;
}
.input-check label {
    font-weight: 600;
}
.input-check input {
    margin-left: 5px;
}
.col-30,
.col-33,
.col-40,
.col-50,
.col-60,
.col-70,
.col-100 {
    float: left;
    width: 100%;
    display: inline-block;
    padding: 15px 15px;
    box-sizing: border-box;
}

[class^="div-"],
[class*="div-"] {
    display: inline-block;
    overflow: hidden;
}
[class^="div-l"],
[class*="div-l"] {
    padding-right: 15px;
    box-sizing: border-box;
}
.div-30 {
    width: 30%;
}
.div-40 {
    width: 40%;
}
.div-60 {
    width: 60%;
}
.div-70 {
    width: 70%;
}
.div-100 {
    width: 100%;
}
.div-l30 {
    width: 30%;
}

[class^="left-"],
[class*="left-"] {
    padding-right: 15px;
    float: left;
    display: inline-block;
    box-sizing: border-box;
}
[class^="right-"],
[class*="right-"] {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: baseline;
}
.left-20 {
    width: 20%;
}
.left-25 {
    width: 25%;
}
.left-30 {
    width: 30%;
}
.left-33 {
    width: 33%;
}
.left-40 {
    width: 40%;
}
.left-50 {
    width: 50%;
}
.left-70 {
    width: 70%;
}
.left-80 {
    width: 80%;
}
.left-60 {
    width: 60%;
}
.right-25 {
    width: 25%;
}
.right-30 {
    width: 30%;
}
.right-33 {
    width: 33%;
}
.right-40 {
    width: 40%;
}
.right-50 {
    width: 50%;
}
.right-60 {
    width: 60%;
}
.right-70 {
    width: 70%;
}
.right-20 {
    width: 20%;
}
.w-100 {
    width: 100%;
}

.cat-box > ul {
    background-color: #fff;
    padding: 15px 10px 15px 25px;
    border: 1px rgb(200, 200, 200) solid;
    box-sizing: border-box;
    height: 200px;
    overflow-y: scroll;
    margin-bottom: 20px;
}
.cat-box > span {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
.cat-box ul li {
    list-style: none;
    margin-bottom: 5px;
}
.cat-box ul li label {
    padding-left: 10px;
    font-size: 14px;
}
.sub-area {
    padding: 15px 10px 5px 10px;
    background-color: #fff;
    /*border:1px rgb(210,210,210) solid;*/
    margin-bottom: 20px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.sub-area h3 {
    font-size: 16px;
    padding-bottom: 5px;
}
.name-check,
.tname-check,
.form-required {
    font-size: 16px;
    display: inline-block;
    position: relative;
    top: 3px;
    cursor: pointer;
}
.des {
    display: none;
    position: absolute;
    text-align: center;
    top: 25px;
    left: -3px;
    font-size: 13px;
    min-width: 150px;
    background-color: #444;
    color: #fff;
    padding: 6px;
    border-radius: 5px;
    cursor: default;
    z-index: 3;
}
.des-arr-up {
    position: absolute;
    top: -6px;
    left: 5px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #444;
    z-index: 3;
}
.name-check:hover > .des {
    display: block;
}
.check-email:hover > .des,
.tname-check:hover > .des {
    display: block;
}
.check-email .des {
    top: 22px;
    left: -20px;
}
.check-email .des-arr-up {
    top: -7px;
    left: 18px;
}
.form-required:hover > .des {
    display: block;
}
.pg-tabs {
    float: left;
    width: 100%;
    margin-bottom: 12px;
}
.pg-tab-list a {
    display: inline-block;
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 600;
    color: #444;
}
.pg-tab-list a:hover {
    color: #ff931e;
}
.pg-tab-list a.pg-tab-active {
    background-color: #fff;
    border: 1px #d7d8d7 solid;
    border-bottom: none;
    position: relative;
    top: 2px;
    color: #7ac943;
}
.pg-tab-item {
    border: 1px #d7d8d7 solid;
    padding: 20px;
    background-color: #fff;
    overflow: hidden;
}
.sub-sec {
    border: 1px #29abe2 dotted;
    padding: 15px 5px;
    overflow: hidden;
}
.sub-sec p {
    text-decoration: underline;
    margin-bottom: 7px;
}
#pass-indi-box {
    width: 100%;
    float: left;
    text-align: center;
}
.p-indi {
    padding: 5px;
    text-align: center;
    width: 150px;
    border: 1px solid rgb(150, 150, 150);
    background-color: #f1f1f1;
    color: #555;
    cursor: default;
    margin: 10px auto 20px auto;
}
#float-msg {
    margin-bottom: 20px;
}
#ez-msg-wrap,
#pg-msg-wrap {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}
#ez-message {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 10px;
    padding-left: 20px;
}
#ez-message.ok {
    border-left: 4px #00b3be solid;
}
#ez-message.ng {
    border-left: 4px #ff5b42 solid;
}
#ez-message p {
    font-size: 14px;
}
#closemsg {
    float: right;
}
#pg-message {
    position: relative;
    box-shadow: 3px 3px 1px rgb(238, 238, 238);
    padding: 10px;
    padding-left: 20px;
    background-color: #fff;
    border-radius: 3px;
}
#pg-message p {
    color: #333;
    font-size: 15px;
    padding-left: 30px;
    padding-right: 25px;
    word-break: normal;
}
#pg-message .icon-remove {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #555;
    cursor: pointer;
}
#pg-message .icon-remove:hover {
    color: #ff5b42;
}
#pg-message ul {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}
.pg-msg-icon {
    position: absolute;
    top: 7px;
    left: 15px;
    font-size: 25px;
    cursor: default;
}
.ok-msg {
    border: #7ac943 2px solid;
}
.ok-msg .pg-msg-icon {
    color: #7ac943;
}
.ng-msg {
    border: #ff931e 2px solid;
}
.ng-msg .pg-msg-icon {
    color: #ff931e;
}
/*for search */
.tab-section {
    position: relative;
    padding: 10px;
    border: rgb(230, 230, 230) 1px solid;
    margin-bottom: 25px;
    overflow: hidden;
}
.auto-list {
    float: left;
    position: static;
    background-color: #fff;
    z-index: 5;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    /*margin-bottom:10px;*/
}
.auto-list.shown {
    border: 1px #bbb solid;
    box-shadow: 2px 2px 3px rgb(238, 238, 238);
    float: right;
}
.auto-list li {
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    list-style: none;
    padding: 5px;
}
.auto-list li.addnew {
    background-color: #dcfce7;
}
.auto-list li:hover {
    background-color: lightcoral;
    color: #fff;
}

.search-sel {
    background-color: #38b0e7;
    color: #fff;
}
.inload {
    background-color: rgba(0, 0, 0, 0.2);
    cursor: wait;
}
.form-section {
    padding: 10px;
    border: #7ac943 dotted 1px;
    margin-bottom: 15px;
    overflow: hidden;
}
.form-section h4 {
    margin-bottom: 10px;
}
.section-title {
    margin-bottom: 10px;
}
/*-------------------------------------------------- DATETIME  --------------------------------------------------*/
.datetime-inline .dt-group,
.datetime-3070 .dt-group {
    width: 100%;
    display: inline-block;
}
.datetime-inline input[type="number"],
.datetime-3070 input[type="number"],
.datetime-3070 select {
    width: 22%;
    margin-left: 2%;
}
.datetime-inline input[type="text"],
.datetime-3070 input[type="text"] {
    width: 50%;
}
.label-3070 .form-time {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}
.label-3070 .form-time input {
    box-sizing: border-box;
    width: 50%;
}
.label-3070 .form-time input:first-child {
    width: 48%;
    margin-right: 2%;
}
.datetime-inline .dt-group select {
    width: 23%;
}
/* .label-3070 {
    display: block;
} */
@media only screen and (min-width: 414px) {
    .but-right input {
        width: auto;
    }
    .label-3070 > label,
    .label-30,
    .label-3070 .papform-check-lb,
    .datetime-3070 label {
        width: 30%;
        text-align: right;
    }
    .label-3070 > input,
    .label-3070 > textarea,
    .label-3070 > select,
    .label-3070 > div,
    .datetime-3070 .dt-group {
        width: 70%;
    }
    .label-3070 > p,
    .datetime-3070 > p {
        width: 70%;
        margin-left: 30%;
    }
    .label-3070 > ul {
        width: 70%;
    }
    .label-3070 .form-time {
        width: 70%;
    }
    /* .label-3070 {
        display: flex;
    } */
}
@media only screen and (min-width: 769px) {
    .col-33,
    .col-40,
    .col-50,
    .col-60,
    .col-100 {
        padding: 15px;
    }
    .col-30 {
        width: 30%;
    }
    .col-33 {
        width: 33%;
    }
    .col-40 {
        width: 40%;
    }
    .col-50 {
        width: 50%;
    }
    .col-60 {
        width: 60%;
    }
    .col-70 {
        width: 70%;
    }
}

/*---------------------------------------------- float-box --------------------------------------------------------------*/
/*.my-float-box {
    display:none;
    position: fixed;
    box-sizing:border-box;
    overflow-y:scroll;
    top: 20px;
    height: auto;
    left: 15px;
    right: 15px;
    padding: 20px;
    box-shadow: 2px 3px 4px rgba(0,0,0,0.2);
    background-color: #f5f5f5;
    border:1px solid rgba(0,0,0,.3);
    color: #444;
    z-index: 101;
    text-align: center;
}*/
.my-float-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    box-sizing: border-box;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #444;
    z-index: 101;
    text-align: center;
    max-height: 90vh;
    min-width: 50vw;
    max-width: 90vw;
}
.my-float-box h4 {
    margin-bottom: 15px;
}
.graying {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}
.my-fb-title {
    margin-bottom: 15px;
    color: #fff;
    background-color: #ff8758;
    padding: 7px 20px;
}
.my-box-close {
    cursor: pointer;
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 18px;
    color: #444;
}
.my-box-close:hover {
    color: #fff;
}
@media only screen and (max-width: 575px) {
    .my-float-box {
        min-width: 90vw;
    }
}

/*---------------------------------------------- RADIO --------------------------------------------------------------*/
.pap-radio {
    float: left;
    width: 100%;
    margin-bottom: 12px;
    font-size: 15px;
}
.radio-3070 .radio-title {
    display: inline-block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding-right: 15px;
    font-weight: 600;
    vertical-align: top;
    text-align: left;
}
.radio-3070 .radio-list {
    box-sizing: border-box;
    float: right;
    width: 100%;
    padding-left: 5px;
    text-align: left;
}
.radio-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    padding-bottom: 0.375rem;
}
.radio-list {
    margin-bottom: 4px;
}
.radio-list input {
    cursor: pointer;
    float: left;
    margin-top: 8px;
    margin-left: 7px;
}
.radio-list label {
    cursor: pointer;
    display: block;
    padding: 5px 5px 5px 25px;
    border: 1px solid rgba(0, 0, 0, 0);
}
.radio-des {
    padding: 7px;
    display: block;
    overflow: hidden;
}
.radio-des input {
    margin: 0;
}
.radio-list input + div {
    border-radius: 5px;
    border: rgb(200, 200, 200) dashed 1px;
}
.radio-list input:checked + div {
    border-radius: 5px;
    border: #bbb solid 1px;
    background-color: #fbec88;
}
@media only screen and (min-width: 414px) {
    .radio-3070 .radio-title {
        width: 30%;
        text-align: right;
    }
    .radio-3070 .radio-list {
        width: 70%;
    }
}
/*---------------------------------------------- TAB --------------------------------------------------------------*/
.my-tab-top {
    display: inline-block;
    background-color: #fbec88;
    padding: 7px 15px;
    border: #d7d8d7 solid 1px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top: none;
    box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.my-tab-inside {
    padding: 10px;
    border: #d7d8d7 solid 1px;
    box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 12px;
}

/*---------------------------------------------- MAX width --------------------------------------------------------------*/
.max-720 {
    max-width: 720px;
}

/*---------------------------------------------- check box with input --------------------------------------------------------------*/
.label-3070 .pap-check-span {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    font-weight: 600;
}
.check-input {
    padding: 0 5px !important;
}
/*---------------------------------------------------- checkbox inline ----------------------------------------------------*/
.pap-checkbox {
    float: left;
    width: 100%;
}
.checkbox-inline .papform-check-lb {
    font-size: 14px;
    font-weight: 600;
}
.checkbox-inline li {
    list-style: none;
    font-size: 13px;
    margin-bottom: 5px;
    width: 50%;
    float: left;
}
.checkbox-inline input[type="checkbox"] {
    float: left;
    width: 15%;
}
.checkbox-inline .check-input,
.label-3070 .check-input {
    font-size: 14px;
    float: left;
    width: 85%;
    box-sizing: border-box;
}
/*=============================================[   MEDIA   ]===============================================*/
.form-media {
    width: 100%;
    float: left;
}
.form-media-input {
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
    padding: 5%;
    width: 100%;
    box-sizing: border-box;
    border: 1px #bbb dashed;
    text-align: center;
    vertical-align: central;
}
.form-media-input p {
    font-size: 13px;
}
.form-media-input .icon-picture-o {
    font-size: 30px;
    cursor: pointer;
}
.form-media-input .icon-picture-o:hover {
    color: #0690cf;
}
.form-media input[type="file"] {
    display: none;
}
.form-media .media-pic {
    width: 100%;
    position: relative;
    max-width: 150px;
    text-align: center;
}
.form-media .media-pic img {
    border: 5px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    width: 100%;
    height: auto;
}
.form-media .media-icon-box {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.5);
}
.form-media .zoom-media {
    display: block;
    font-size: 20px;
    color: #38b0e7;
    cursor: pointer;
}
.form-media .media-cc-90,
.form-media .media-c-90 {
    display: block;
    color: #38b0e7;
    cursor: pointer;
}
.form-media .delete-media {
    display: block;
    font-size: 20px;
    color: #ed1c24;
    cursor: pointer;
}
/*=============================================[   FORM SIGN   ]===============================================*/
.form-sign {
    width: 100%;
    float: left;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}
.form-media-input .icon-page-edit {
    font-size: 30px;
    cursor: pointer;
}
.form-media-input .icon-page-edit:hover {
    color: #0690cf;
}
/* set ให้กรอบในไม่มี padding */
.ui-dialog.ui-signature .ui-dialog-content {
    padding: 0;
}
.form-sign .media-pic {
    position: relative;
    max-width: 150px;
}
.form-sign .media-pic img {
    border: 5px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    width: 100%;
    height: auto;
}
.form-sign .media-icon-box {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.5);
}
.form-sign .zoom-media {
    display: block;
    font-size: 20px;
    line-height: 20px;
    color: #38b0e7;
    cursor: pointer;
}
.form-sign .media-cc-90,
.form-sign .media-c-90 {
    display: block;
    color: #38b0e7;
    cursor: pointer;
}
.form-sign .delete-media {
    display: block;
    font-size: 20px;
    line-height: 20px;
    color: #ed1c24;
    cursor: pointer;
}
/*=============================================[   MEDIA BOX   ]===============================================*/
.md-dialog {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.md-dialog > div {
    display: inline-block;
    position: relative;
    /* top: 60px; */
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);
    padding: 20px;
}
.md-dialog > div img {
    max-height: 80vh;
    width: auto;
    max-width: 90vw;
}
.md-dialog a {
    display: inline-block;
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 25px;
}
[id*="-result-list"] ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
[id*="-result-list"] ul li {
    list-style: none;
    font-size: 13px;
}
[id*="-result-list"] ul .tag-remove {
    cursor: pointer;
    padding-right: 5px;
}
[id*="-result-list"] ul .tag-remove:hover {
    color: red;
}
/* list-auto-search-text ให้แสดงเป็นบรรทัดไปเลย */
.list-search-text [id*="-result-list"] {
    float: left;
    width: 100%;
}
.list-search-text [id*="-result-list"] ul {
    display: block;
}

/*=============================================[   GREEN BUT   ]===============================================*/
input[type="button"].green-but,
input[type="button"].green-but:active,
input[type="button"].green-but:focus {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #fff !important;
    font-weight: 500;
    background: rgba(0, 200, 83, 0.9);
    border: 1px solid #28a745;
    border-radius: 12px;
    cursor: pointer;
    padding: 8px 20px;
    box-sizing: border-box;
    font-size: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #28a745;
}
input[type="button"].green-but:not([disabled]):hover {
    background: rgba(0, 200, 83, 1);
    border: 1px solid #1b5e20;
}
input[type="button"]:disabled {
    color: gray;
    filter: grayscale(1);
}
/* =============================================[   FORM NUM 2   ]=============================================== */
.form-num2 input[type="text"] {
    text-align: right;
}
.input-align-right input {
    text-align: right;
}

/* =============================================[   FORM hms   ]=============================================== */
.input-hms input[type="number"] {
    width: 33%;
}
.input-hm input[type="number"] {
    width: 50%;
}

/* =============================================[   FROM GMAP   ]=============================================== */
.form-gmap {
    width: 100%;
    float: left;
}

/* =============================================[   NO ARROW   ]=============================================== */
/* Chrome, Safari, Edge, Opera */
.no-arrow input::-webkit-outer-spin-button,
.no-arrow input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.no-arrow input[type="number"] {
    -moz-appearance: textfield;
}

/* =============================================[   ck-edit-input   ]=============================================== */
.ck-edit-input {
    margin-right: 0.5rem;
}

/* =============================================[   NEW MARGIN PADDING   ]=============================================== */
.mb-0 {
    margin-bottom: 0 !important;
}
.pl-0 {
    padding-left: 0 !important;
}
.pr-0 {
    padding-right: 0 !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}

/* =============================================[   ส่วนแสดงผล checked ที่เก็บใน session   ]=============================================== */
.show-checked-ses ul {
    border: 1px dashed green;
    padding: 5px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.show-checked-ses .icon-delete-circle {
    cursor: pointer;
}
.show-checked-ses .icon-delete-circle:hover {
    color: red;
}

/* =============================================[   Grid column   ]=============================================== */
.tw-grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; /* 8px */
}

/* switch toggle  */
.form-toggle {
    font-size: 20px;
    cursor: pointer;
}

.cl-blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* fix unknown spacing */
@media only screen and (min-width: 414px) {
    .nform.label-3070 {
        display: flex;
        float: left;
        width: 100%;
    }
}

/* =============================================[   checkbox single 2   ]=============================================== */
.checkbox-single {
    float: left;
    width: 100%;
    display: flex;
}
.checkbox-single .div-30 {
    box-sizing: border-box;
    text-align: right;
    padding-right: 15px;
}
.checkbox-single .div-70 {
    font-size: 14px;
    font-weight: 600;
}