body {
    color: #071850;
    font-size: calc(0.7em + 1vmin);
    font-weight: 400;
    line-height: 1.6;
    font-family: 'Noto Sans Thai', sans-serif;
    background: #0C1438 url(images/bg.jpg) no-repeat top center;
    background-color: #162951;
    background-size:100% auto;
}

a {
    text-decoration: none;
}

.header-section {
    background-color: #091E4B;
}

.header-section-inner {
    height: 60px;
    justify-content: space-between;
    align-items: center;
}

    .header-section-inner a {
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }

    .header-section-inner .home {
    }

.dash-action a {
    text-decoration: none;
    color: #09101A
}

.dash-action img {
    height: 36px;
}

.dash-bg-1 {
    background-color: #555555;
}

.navbar-nav.main a.nav-link{
    color:#000;
    padding:10px 15px;
}
.navbar-nav.main a.nav-link.active {
    color: #000;
    background-color:#f1f1f1
}
.navbar-nav.main .dropdown-item.active {
    color: #000;
    background-color: #f1f1f1
}
.navbar-nav.main .dropdown-menu {
   border:none;
}
.navbar-nav.main .dropdown-menu .dropdown-item {
    padding-left: 30px;
}

.gradient-box-2 {
    box-shadow: 0 0 8px 2px #372f1d;
    border: 3px solid transparent;
    border-top-color: transparent;
    border-top-style: solid;
    border-top-width: 3px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 3px;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 3px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-attachment: scroll, scroll;
    background-image: linear-gradient(#091135,#0E1225), linear-gradient(0deg, rgb(145, 116, 45) 0%, rgb(145, 116, 45) 7%, rgb(180, 144, 58) 18%, rgb(180, 144, 58) 20%, rgb(214, 182, 95) 24%, rgb(255, 254, 166) 28%, rgb(214, 182, 95) 33%, rgb(180, 144, 58) 37%, rgb(180, 144, 58) 40%, rgb(91, 69, 22) 56%, rgb(180, 144, 58) 57%, rgb(180, 144, 58) 58%, rgb(180, 144, 58) 62%, rgb(255, 254, 166) 67%, rgb(180, 144, 58) 76%, rgb(180, 144, 58) 89%, rgb(145, 116, 45) 99%);
    background-size: auto, auto;
    background-origin: padding-box, padding-box;
    background-clip: padding-box, border-box;
    border-radius: 12px;
    /*background-color: #091135;*/
}

.form-control {
    box-shadow: 0 0 8px 2px #372f1d;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-attachment: scroll, scroll;
    background-image: linear-gradient(#1C243B,#0E1225), linear-gradient(0deg, rgb(145, 116, 45) 0%, rgb(145, 116, 45) 7%, rgb(180, 144, 58) 18%, rgb(180, 144, 58) 20%, rgb(214, 182, 95) 24%, rgb(255, 254, 166) 28%, rgb(214, 182, 95) 33%, rgb(180, 144, 58) 37%, rgb(180, 144, 58) 40%, rgb(91, 69, 22) 56%, rgb(180, 144, 58) 57%, rgb(180, 144, 58) 58%, rgb(180, 144, 58) 62%, rgb(255, 254, 166) 67%, rgb(180, 144, 58) 76%, rgb(180, 144, 58) 89%, rgb(145, 116, 45) 99%);
    background-size: auto, auto;
    background-origin: padding-box, padding-box;
    background-clip: padding-box, border-box;
    border-radius: 7px;
    color: #fff;
}

.form-select {
    box-shadow: 0 0 8px 2px #372f1d;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-attachment: scroll, scroll;
    background-image: linear-gradient(#1C243B,#0E1225), linear-gradient(0deg, rgb(145, 116, 45) 0%, rgb(145, 116, 45) 7%, rgb(180, 144, 58) 18%, rgb(180, 144, 58) 20%, rgb(214, 182, 95) 24%, rgb(255, 254, 166) 28%, rgb(214, 182, 95) 33%, rgb(180, 144, 58) 37%, rgb(180, 144, 58) 40%, rgb(91, 69, 22) 56%, rgb(180, 144, 58) 57%, rgb(180, 144, 58) 58%, rgb(180, 144, 58) 62%, rgb(255, 254, 166) 67%, rgb(180, 144, 58) 76%, rgb(180, 144, 58) 89%, rgb(145, 116, 45) 99%);
    background-size: auto, auto;
    background-origin: padding-box, padding-box;
    background-clip: padding-box, border-box;
    border-radius: 7px;
    color: #fff;
    /*    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2326749a'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 16px;
    background-position: calc(100% - 10px) 17px;
    background-repeat: no-repeat;*/
  
}

.form-control:focus {
    color: #fff;
}


    .form-select:focus option{
        color: #000;
    }

select.form-select {
    appearance: auto;
}

@media (max-width: 600px) {
    body{
        background-position:bottom center;
        background-size:100% auto;
        background-attachment:fixed;
    }
    .header-section {
    
    }
    .dash-action a {
        font-size: 3vw;
    }
    .linebreak::before {
        content: "\a";
        white-space: pre;
    }
}
@media (max-width: 1125px) {
    body {
        background-position: bottom center;
        background-size: 100% auto;
        background-attachment: fixed;
    }
}

.g-effect {
    position: relative;
   
}

    .g-effect:before {
        content: "";
        background: linear-gradient( 45deg, #D4AF37, #CD853F, #FFA500, #FFD700, #FAFAD2, #EEE8AA, #F0E68C, #DAA520
        );
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: g-effect 20s linear infinite;
        transition: opacity 0.3s ease-in-out;
        border-radius: 4.8px;
    }
    .g-effect:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #222;
        left: 0;
        top: 0;
        border-radius: 4.8px;
    }

@keyframes g-effect {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}


.table{
    font-size:.9em;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

    .btn-circle.btn-lg {
        width: 44px;
        height: 44px;
        padding:6px 0;
        font-size: 12px;
        line-height: 40px;
        border-radius: 50%;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        font-size: 24px;
        line-height: 1.33;
        border-radius: 35px;
    }

table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
    right: 5px;
    line-height: 6px;
    font-size: .5em;
}
table.dataTable {
    border-collapse: collapse !important;
}
    table.dataTable thead > tr > th {     
        border-top: solid 1px #6C757D !important;
        border-bottom: solid 1px #6C757D !important;
    }

.dataTables_wrapper .dataTables_paginate {
    font-size: .8em;
}
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 1em;
        padding: .2em .6em;
    }

.blink_me {
    animation: blinker 1s linear infinite;
}

.rotate {
    animation: rotation 4s infinite linear;
}

.cn {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

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

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.cb {
    font-size: .25em;
    display: block;
    position: absolute;
    text-align: center;
    line-height: 4em;
    top: 12px;
    left: 0;
    width: 3.5em;
    height: 4em;
    color: #000;
    font-weight: 300
}
.x-title{
    font-size:.9em;

}

@media screen and (max-width: 600px) {
    .cb {
        top: 14px;
        left: 4px;
        width: 3.5em;
        height: 4em;
        font-size: .15em;
        font-weight: 100
    }
}

.s-1 {
    background-color: #fff4de;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    background-image: -webkit-linear-gradient(-30deg, #fff4de 50%, #ffffff 50%);
}
.s-2 {
    background-color: #eeffde;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    background-image: -webkit-linear-gradient(-30deg, #eeffde 50%, #ffffff 50%);
}
.s-3 {
    background-color: #ffdef4;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    background-image: -webkit-linear-gradient(-30deg, #ffdef4 50%, #ffffff 50%);
}
.s-4 {
    background-color: #C9F7F5;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    background-image: -webkit-linear-gradient(-30deg, #C9F7F5 50%, #ffffff 50%);
}
.s-5 {
    background-color: #F2F6F9;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    background-image: -webkit-linear-gradient(-30deg, #F2F6F9 50%, #ffffff 50%);
}
.s-6 {
    background-color: #fff4de;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    background-image: -webkit-linear-gradient(-30deg, #fff4de 50%, #ffffff 50%);
}