@font-face {
    font-family: 'Laksaman';
    src: url('/fonts/LAKSAMAN.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Laksaman';
    src: url('/fonts/LAKSAMAN-BOLD.OTF') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Laksaman';
    src: url('/fonts/LAKSAMAN-ITALIC.OTF') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Laksaman';
    src: url('/fonts/LAKSAMAN-BOLDITALIC.OTF') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'stkaiti';
    src: url('/fonts/STKaiti.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'XXKaiti';
    src: url('/fonts/STKaiti.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    /*padding-top: 50px;*/
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 5px;
    padding-right: 5px;*/
    /*font-family: "THSarabunNewRegular" ,"Helvetica Neue", "Helvetica", "Arial", "sans-serif";*/
    font-family: "Laksaman","Helvetica Neue", "Helvetica", "Arial", "sans-serif", "stkaiti";
}

.body-margin {
    padding-top: 20px;
}


.body_div_home {
    /*max-width: 1600px;*/
    margin: auto;
}

.body_div_qimen {
    max-width: 1800px;
    margin: auto;
}

.body_div_search {
    max-width: 1800px;
    margin: auto;
}



.bg-darker {
    background-color: #222;
    border-color: #080808;
}

.dropdown-menu {
    background-color: #222;
    border: none;
}

.dropdown-item {
    color: rgba(255,255,255, .5);
}

.dropdown-item:hover {
    background-color: #222;
    color: rgba(255,255,255, 0.75);
}


.dx-widget {
    font-family: "Laksaman","Helvetica Neue", "Helvetica", "Arial", "sans-serif", "cwTeXHei";
    /*font-family: "Laksaman","Helvetica Neue", "Helvetica", "Arial", "sans-serif";*/
}

.noscroll {
    position: fixed;
    overflow-y: scroll
}

.cn {
    font-family: "stkaiti";
}

.cn2 {
    font-family: "cwTeXHei";
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

.subTitle {
    background-color: lightslategrey;
    padding: 10px 15px;
    color: white;
    margin-top: 20px;
    margin-bottom: 30px;
}


.navbar li.nav-item {
    margin: 0px 5px;
}

.nav-pills > li.active > a
, .nav-pills > li.active > a:hover
, .nav-pills > li.active > a:focus
{
    background-color: lightslategrey;
}

.nav > li.active > a
, .nav > li.active > a:hover
, .nav > li.active > a:focus {
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f3f5f6;
}


.nav > li > a {
    /*color: lightslategrey;*/
}

.right-content-top-hr {
    display: block;
    border-color: lightgrey;
    border-style: double;
    border-top-width: 4px;
}

.dx-button.qimen_chart_btn_selected {
    background-color: lightgrey;
    border-color: #9d9d9d;
}


.qimen_random_btn {
    padding-right: 5px;
}

.qimen_load_btn {
    padding-right: 5px;
    padding-left: 5px;
}

.qimen_load_single_btn {
    padding-right: 5px;
}

.qimen_save_btn {
    padding-left: 5px;
}


.box.outerBox {
    margin-bottom: 20px;
}






.j-btn-lg {
    padding-left: 35px;
    padding-right: 35px;
    min-width: 256px;
    height: 50px;
    font-family: "HelveticaNeue-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    border-radius: 4px;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.j-btn.blue {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    border: 0;
    color: white;
    background-color: #47c6f1;
    background: #42c8f7;
    background: -moz-linear-gradient(left, #42c8f7 0%, #4adfff 100%);
    background: -webkit-linear-gradient(left, #42c8f7 0%, #4adfff 100%);
    background: linear-gradient(to right, #42c8f7 0%, #4adfff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42c8f7', endColorstr='#4adfff',GradientType=1 );
}

.j-btn.blue:hover {
    background: #4BBDEC;
    /* Old browsers */
    background: -moz-linear-gradient(left, #4BBDEC 0%, #50C7F3 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4BBDEC 0%, #50C7F3 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4BBDEC 0%, #50C7F3 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4BBDEC', endColorstr='#50C7F3',GradientType=1 );
    /* IE6-9 */
}

.j-btn.red {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    border: 0;
    color: white;
    background-color: #F34646;
    background: #F84343;
    background: -moz-linear-gradient(left, #F84343 0%, #FF4A4A 100%);
    background: -webkit-linear-gradient(left, #F84343 0%, #FF4A4A 100%);
    background: linear-gradient(to right, #F84343 0%, #FF4A4A 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F34646', endColorstr='#F84343',GradientType=1 );
}

.j-btn.red:hover {
    background: #EE4C4C;
    /* Old browsers */
    background: -moz-linear-gradient(left, #EE4C4C 0%, #F35050 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #EE4C4C 0%, #F35050 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #EE4C4C 0%, #F35050 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EE4C4C', endColorstr='#F35050',GradientType=1 );
    /* IE6-9 */
}


.chart_date_header_text__dashboard {
    font-size: 12pt;
    font-weight: normal;
}

.chart_date_header_text__index {
    font-size: 12pt;
    font-weight: normal;
}

._InputQiMenViewDiv1 {
    padding-left: 0px;
    padding-right: 0px;
}
._InputQiMenViewDiv2 {
    padding-left: 0px;
    padding-right: 0px;
}


#PrevMonth1:before,
#PrevMonth2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f049";
    padding: 10px 5px;
}

#PrevDay1:before,
#PrevDay2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f04a";
    padding: 10px 5px;
}

#PrevHour1:before,
#PrevHour2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f04b";
    padding: 10px 5px;
    /* Safari */
    -webkit-transform: rotate(-180deg);
    /* Firefox */
    -moz-transform: rotate(-180deg);
    /* IE */
    -ms-transform: rotate(-180deg);
    /* Opera */
    -o-transform: rotate(-180deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#NextHour1:before,
#NextHour2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f04b";
    padding: 10px 5px;
}

#NextDay1:before,
#NextDay2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f04e";
    padding: 10px 5px;
}

#NextMonth1:before,
#NextMonth2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f050";
    padding: 10px 5px;
}

#PrevMonth1 .dx-button-content,
#PrevDay1 .dx-button-content,
#PrevHour1 .dx-button-content,
#NextHour1 .dx-button-content,
#NextDay1 .dx-button-content,
#NextMonth1 .dx-button-content, 
#PrevMonth2 .dx-button-content,
#PrevDay2 .dx-button-content,
#PrevHour2 .dx-button-content,
#NextHour2 .dx-button-content,
#NextDay2 .dx-button-content,
#NextMonth2 .dx-button-content {
    display: none;
}


@media screen and (min-width: 576px) {
    .container {
        /*max-width: 540px;*/
        max-width: inherit;
    }
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {


    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: goldenrod;
    }


}


@media screen and (min-width: 768px) {

    .body-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .chart_date_header_text__dashboard {
        font-size: 14pt;
    }

    .chart_date_header_text__index {
        font-size: 12pt;
    }

    ._InputQiMenViewDiv1 {
        padding-right: 5px;
        padding-left: 5px;
    }

    ._InputQiMenViewDiv2 {
        padding-right: 5px;
        padding-left: 5px;
    }

}

/* change layout*/
@media screen and (min-width: 992px) {

    .subTitle {
        margin-top: 0px;
    }
    .right-content-top-hr {
        display: none;
    }

    .chart_date_header_text__dashboard {
        font-size: 18pt;
    }

    .chart_date_header_text__index {
        font-size: 14pt;
    }
}

@media (min-width: 1200px) {
    .container {
        min-width: calc(100% - 60px);
    }
}

@media (min-width: 1800px) {
    .container {
        min-width: 1600px;
    }
}