body {
    font-family: 'Kanit ExtraLight', verdana, helvetica, arial, sans-serif;
    padding: 20px;
    font-size: 12px;
    margin: 0;
}

h2 {
    font-family: 'Kanit ExtraLight';
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    margin-bottom: 15px;
}

.Kanit-ExtraLight {
    font-family: 'Kanit ExtraLight' !important;
    text-shadow: 0 2px 2px rgb(118, 118, 116);
}

.Kanit-Bold {
    font-family: 'Kanit Bold' !important;
    text-shadow: 0 2px 2px rgb(118, 118, 116);
}

.l-btn-icon {
    font-size: 16px !important;
}

.textbox-readonly .textbox-text {
    background: #eee !important;
}
.textbox .validatebox-readonly{
	background: #eee !important;
}
.textbox textarea.textbox-text{
	white-space:pre-wrap;
}
.panel-overflow-visible {
    overflow: visible;
}

.swal2-container {
    z-index: 100000;
}

/* Metal Buttons Start*/
.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 900;
    font-style: normal;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: inline-block;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.3);
    outline: none;
    border: 1px solid #ba6;
}

.custom-btn:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

/* 1 */
.btn-1-gold {
    backface-visibility: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    background: linear-gradient(180deg, #fea 0%, #dc8 49%, #a95 51%, #dc8 100%);
    border-radius: 5px;
}

/* 2 */
.btn-2-gold {
    background: linear-gradient(top, #a95, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95);
    background: -webkit-linear-gradient(top, #a95, #fea 25%, #ffffff 38%, #dc8 63%, #fea 87%, #a95);
}

/* 3 */
.btn-3-gold {
    background: -webkit-gradient(linear, left top, left bottom, from(#a95), to(#fea));
}

/* 4 */
.btn-4-gold {
    color: #fff;
    background-image: -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) 3%, rgba(255, 238, 170, .1) 3.75%),
        -webkit-repeating-linear-gradient(left, rgba(170, 153, 85, 0) 0%, rgba(170, 153, 85, 0) 2%, rgba(170, 153, 85, .03) 2.25%),
        -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(255, 238, 170, .15) 1.2%),

        linear-gradient(180deg, #a95 0%,
            #fea 47%,
            #dc8 53%,
            #fea 100%);

}

/* 5 */
.btn-5-silver {
    backface-visibility: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    border-color: #7c7c7c;
    background: linear-gradient(180deg, #e6e6e6 0%, rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%, rgba(0, 0, 0, 0.25) 100%);
    border-radius: 5px;
}

/* 6 */
.btn-6-silver {
    border-color: #7c7c7c;
    background: linear-gradient(top, rgba(38, 38, 38, 0.8), #e6e6e6 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
    background: -webkit-linear-gradient(top, rgba(38, 38, 38, 0.5), #e6e6e6 25%, #ffffff 38%, rgba(0, 0, 0, 0.25) 63%, #e6e6e6 87%, rgba(38, 38, 38, 0.4));
}

/* 7 */
.btn-7-silver {
    border-color: #7c7c7c;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(#e6e6e6));
}

/* 8 */
.btn-8-silver {
    border-color: #7c7c7c;
    background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%),
        -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%),
        -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%),

        linear-gradient(180deg, hsl(0, 0%, 78%) 0%,
            hsl(0, 0%, 90%) 47%,
            hsl(0, 0%, 78%) 53%,
            hsl(0, 0%, 70%)100%);
}

/* 9 */
.btn-9-rose {
    backface-visibility: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    border-color: #D9A3A9;
    background: linear-gradient(180deg, #FFE6E9 0%, #DDA6AE 49%, #B76E79 51%, #DDA6AE 100%);
    border-radius: 5px;
}

/* 10 */
.btn-10-rose {
    border-color: #D9A3A9;
    background: linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffffff 38%, #FFE6E9 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
    background: -webkit-linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffefef 38%, #D9A3A9 63%, #FFE6E9 87%, #DDA6AE);
}

/* 11 */
.btn-11-rose {
    border-color: #D9A3A9;
    background: -webkit-gradient(linear, left top, left bottom, from(#D9A3A9), to(#FFE6E9));
}

/* 12 */
.btn-12-rose {
    border-color: #D9A3A9;
    background-image: -webkit-repeating-linear-gradient(left, rgba(255, 230, 233, 0) 0%, rgba(255, 230, 233, 0) 3%, rgba(255, 230, 233, .1) 3.75%),
        -webkit-repeating-linear-gradient(left, rgba(183, 110, 121, 0) 0%, rgba(183, 110, 121, 0) 2%, rgba(183, 110, 121, .2) 2.25%),
        -webkit-repeating-linear-gradient(left, rgba(255, 230, 233, 0) 0%, rgba(255, 230, 233, 0) .6%, rgba(255, 230, 233, .3) 1.1%),

        linear-gradient(180deg, #D9A3A9 0%,
            rgba(255, 230, 233, 1) 47%,
            #D9A3A9 53%,
            rgba(255, 230, 233, .7)100%);
}


/* 13 */
.btn-13-black {
    backface-visibility: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    border-color: #111;
    color: #555;
    background: linear-gradient(180deg, #555 0%, #222 49%, #000 51%, #222 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, 0.3);
}

/* 14 */
.btn-14-black {
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-color: #111;
    color: #555;
    background: -webkit-linear-gradient(top, #000, #222 15%, #333 28%, #000 63%, #2f2f2f 87%, #000);
}

/* 15 */
.btn-15-black {
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .8), 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-color: #111;
    color: #555;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
}

/* 16 */
.btn-16-black {
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-color: #111;
    color: #555;
    background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%),
        -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%),
        -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%),

        linear-gradient(180deg, hsl(0, 0%, 0%) 0%,
            hsl(0, 0%, 10%) 47%,
            hsl(0, 0%, 0%) 53%,
            hsl(0, 0%, 10%)100%);
}

/* Metal Buttons End*/

/*
 * Modifier: `uk-button-warning`
 */
.uk-button-warning {
    background-color: #f9a124;
    color: #fff;
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    border-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Hover */
.uk-button-warning:hover,
.uk-button-warning:focus {
    background-color: #f9a124;
    color: #fff;
    background-image: none;
}

/* Active */
.uk-button-warning:active,
.uk-button-warning.uk-active {
    background-color: #f9a124;
    color: #fff;
    background-image: none;
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.demo-info {
    padding: 0 0 12px 0;
}

.demo-tip {
    display: none;
}

.label-top {
    display: block;
    height: 22px;
    line-height: 22px;
    vertical-align: middle;
}

.footer {
    background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}

.nav-bk1 {
    background: #40E0D0;
    background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
}

.nav-bk2 {
    background: #23074d;
    background: -webkit-linear-gradient(to right, #cc5333, #23074d);
    background: linear-gradient(to right, #cc5333, #23074d);
}

.nav-bk3 {
    background: #00F260;
    background: -webkit-linear-gradient(to right, #0575E6, #00F260);
    background: linear-gradient(to right, #0575E6, #00F260);
}

.nav-bk4 {
    background: #070000;
    background: -webkit-linear-gradient(to right, #070000, #4C0001, #070000);
    background: linear-gradient(to right, #070000, #4C0001, #070000);
    color: whitesmoke;
}

.nav-bk5 {
    background: #0575E6;
    background: -webkit-linear-gradient(to right, #021B79, #0575E6);
    background: linear-gradient(to right, #021B79, #0575E6);
    color: whitesmoke;
}

.nav-bk6 {
    background: #2196f3;
    background: -webkit-linear-gradient(to right, #f44336, #2196f3);
    background: linear-gradient(to right, #f44336, #2196f3);
}

.nav-bk7 {
    background: #c2e59c;
    background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c);
    background: linear-gradient(to right, #64b3f4, #c2e59c);
}

.nav-bk8 {
    background: #5f2c82;
    background: -webkit-linear-gradient(to right, #49a09d, #5f2c82);
    background: linear-gradient(to right, #49a09d, #5f2c82);
}
/* .nav-bk9 {
  background-image: url("../images/B-ResBanner.jpg");
  background-color: #F2D16B;
  background-size: 100% 100%;
} */
.nav-bk9 {
    background-image: url("../images/bg.png");
    background-color: #F2D16B;
    background-size: cover;        /* หรือ 100% auto */
    background-position: center;
    background-repeat: no-repeat;
  }
.nav-bk10 {
    background-image: url("../images/t-bg.png");
    background-color: #F2D16B;
    background-size: 100% 100%;
  }
.nav-bk11 {
    background-image: url("../images/bg.png");
    background-color: #F2D16B;
    background-size: 100% 100%;
    color: whitesmoke;
    display: table-cell;
    vertical-align:middle;
}
.bg-golden {
    background: #F2D16B;
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
}

.bg-golden-i {
    /* background: #F2D16B; */
    /* background: -webkit-linear-gradient(top, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); */
    background: linear-gradient(to right, #BF953F, #FCF6BA, #FBF5B7, #AA771C);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
}

.bg-golden-ii {
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
}

.bg-grey-i {
    /* background: #F2D16B; */
    /* background: -webkit-linear-gradient(top, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); */
    background: linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb, #eaeaea);
    text-shadow: 0 2px 2px rgb(247, 246, 243);
}

.gradient-ii {
    /* text-shadow: 0 2px 2px rgba(250, 227, 133, 1); */
    background: -moz-linear-gradient(-72deg, #dedede, #ffffff 16%, #dedede 21%, #ffffff 24%, #dedede 36%, #ffffff 45%, #ffffff 60%, #dedede 72%, #ffffff 80%, #dedede 84%, #a1a1a1);
    background: -webkit-linear-gradient(-72deg, #dedede, #ffffff 16%, #dedede 21%, #ffffff 24%, #dedede 36%, #ffffff 45%, #ffffff 60%, #dedede 72%, #ffffff 80%, #dedede 84%, #a1a1a1);
    background: -o-linear-gradient(-72deg, #dedede, #ffffff 16%, #dedede 21%, #ffffff 24%, #dedede 36%, #ffffff 45%, #ffffff 60%, #dedede 72%, #ffffff 80%, #dedede 84%, #a1a1a1);
    background: linear-gradient(-72deg, #dedede, #ffffff 16%, #dedede 21%, #ffffff 24%, #dedede 36%, #ffffff 45%, #ffffff 60%, #dedede 72%, #ffffff 80%, #dedede 84%, #a1a1a1);
    text-shadow: 0 2px 2px rgb(247, 246, 243);
}

.accordion .accordion-header {
    /* background: #f3f3f3; */
    background: linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb, #eaeaea);
    text-shadow: 0 2px 2px rgb(205, 204, 201);
}

.accordion .accordion-header-selected {
    background: #F2D16B;
    background: linear-gradient(to right, #BF953F, #FCF6BA, #FBF5B7, #AA771C);
}

.accordion .accordion-header-selected .panel-title {
    color: black;
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
}

.l-btn-focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-glolden {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

.golden-btn {
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: .3em;
    height: 2.75em;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 1em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(110, 80, 20, .4),
        inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
    color: rgb(120, 50, 5);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position: center;
}

.golden-btn:focus,
.golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    border: 1px solid rgba(165, 93, 7, .6);
    color: rgba(120, 50, 5, .8);
}

.golden-btn:active {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(110, 80, 20, .4),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}
.red {
    color: #DB2828;
}
.orange {
    color: #F2711C;
}
.yellow {
    color: #FBBD08;
}
.olive {
    color: #B5CC18;
}
.green {
    color: #016936;
}
.teal {
    color: #00B5AD;
}
.blue {
    color: #2185D0;
}
.violet {
    color: #6435C9;
}
.purple {
    color: #A333C8;
}
.pink {
    color: #E03997;
}
.brown {
    color: #A5673F;
}
.grey {
    color: #767676;
}
.black {
    color: #1B1C1D;
}