@import url('black_theme.css');
@import url('gold_theme.css');

header .sf-menu {
    color: var(--color-text-white) !important;
}

.sf-menu> li> a:hover {
    background-color: var(--color-bg-green) !important;}

.color-green-800 {
    color: var(--color-text-green) !important;
}

/* button to chnage color  */
.button_green {
    color: var(--color-text-green) !important;
    background-color: var(--color-bg-white) !important;
    border: 2px solid var(--color-border-black) !important;
}

.button_black {
    color: var(--color-text-white) !important;
    background-color: var(--color-bg-black) !important;
    border: 2px solid var(--color-border-black) !important;
}

.button_yellow {
    color: var(--color-text-gold) !important;
    background-color: var(--color-bg-black) !important;
    border: 2px solid var(--color-border-gold) !important;
}

.border-r {
    border-right: 1px solid var(--color-border-grey-80) !important;
    margin: 0 12px !important;
}

.title_footer{
    font-size: 20px;
    color: var(--color-text-white) !important;
}

@media (min-width: 768px) and (max-width: 1499.9999px) {
    div.header_container {
        background-color: var(--color-bg-header-dark-purple) !important;
    }

    div.header_container2 {
        background-color: var(--color-bg-header-purple) !important;
    }
}

@media (min-width: 1500px) {
    div.header_container {
        background-color: var(--color-bg-header-dark-purple) !important;
    }

    div.header_container2 {
        background-color: var(--color-bg-header-purple) !important;
    }
}

div.header_container3 {
    color: var(--color-text-black) !important;
    border-bottom: 3px solid var(--color-border-header-dark-purple) !important;
}


/*========================   Menu   ==========================*/
.sf-menu {
    color: var(--color-text-dark-blue) !important;
}

.sf-menu>li.sfHover>a,
.sf-menu>li.active {
    background-color: var(--color-bg-white) !important;
}

.sf-menu>li>a:hover {
    background-color: var(--color-bg-green-hover) !important;
    color: var(--color-text-white) !important;
}


.sf-menu ul {
    background: var(--color-bg-white) !important;
    border: 1px solid var(--color-border-green) !important;
}

.sf-menu ul:before {
    /** Line Menu */
    background: var(--color-bg-green) !important;
}

.sf-menu ul>li {
    border-bottom: 1px solid var(--color-border-header-light-grey) !important;
}

.sf-menu ul>li>a {
    /** sub-menu */
    color: var(--color-text-dark-charcoal) !important;
    background: var(--color-bg-white) !important;
}

.sf-menu ul>li.sfHover>a,
.sf-menu ul>li>a:hover {
    color: var(--color-text-white) !important;
    background-color: var(--color-bg-green) !important;
}

.sf-menu ul>li>span {
    /** sub-menu */
    color: var(--color-text-dark-charcoal) !important;
    background: var(--color-bg-green) !important;
}

.sf-menu ul ul>li.sfHover>a,
.sf-menu ul ul>li>a:hover {
    color: var(--color-text-white) !important;
    background-color: var(--color-bg-green) !important;
}

/*==================  Stuck menu เมนูที่ติดมาด้วย ======================*/

div.stuck_container {
    background-color: var(--color-bg-header-dark-purple) !important;
}

.isStuck {
    background-color: var(--color-bg-header-dark-purple) !important;
    z-index: 1;
}

.isStuck .sf-menu ul {
    box-shadow: 0px 0px 10px var(--color-showdow-grey-80) !important;
    border: 1px solid var(--color-border-grey-80) !important;
}


/*========================================================
  END HEADER  Section
  =========================================================*/



/*========================================================
  Main Styles
  =========================================================*/
.green {
    color: var(--color-bg-green) !important;
}

.white {
    color: var(--color-text-white) !important;
}

a.white_green_underline {
    border-bottom: 1px solid var(--color-border-white) !important;
    color: var(--color-text-white) !important;
}

a:hover.white_green_underline {
    border-bottom: 1px solid var(--color-border-white) !important;
    color: var(--color-text-white) !important;
    background-color: var(--color-bg-green) !important;
}

a.green_white_underline {
    border-bottom: 1px solid var(--color-border-green) !important;
    color: var(--color-text-green) !important;
}

a:hover.green_white_underline {
    border-bottom: 1px solid var(--color-border-white) !important;
    color: var(--color-text-white) !important;
    background-color: var(--color-bg-green) !important;
}

@media only screen and (min-width: 320px) and (max-width: 767.9999px) {
    div.title-content-met {
        color: var(--color-text-white) !important;
    }

    div.title-content-met>span {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.title-content-met>h4 {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.detail-content-met {
        background-color: var(--color-text-white) !important;
    }

    p.temp {
        border-top: 1px solid var(--color-border-grey-60) !important;
        border-bottom: 1px solid var(--color-border-grey-60) !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.9999px) {
    div.title-content-met {
        color: var(--color-text-white) !important;
    }

    div.title-content-met>span {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.title-content-met>h4 {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.detail-content-met {
        background-color: var(--color-text-white) !important;
    }

    p.temp {
        border-top: 1px solid var(--color-border-grey-60) !important;
        border-bottom: 1px solid var(--color-border-grey-60) !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1399.9999px) {
    div.title-content-met {
        color: var(--color-text-white) !important;
    }

    div.title-content-met>span {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.title-content-met>h4 {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.detail-content-met {
        background-color: var(--color-text-white) !important;
    }

    div.detail-content-met>p.temp {
        border-top: 1px solid var(--color-border-grey-60) !important;
        border-bottom: 1px solid var(--color-border-grey-60) !important;
    }
}

@media only screen and (min-width: 1400px) {
    div.title-content-met {
        color: var(--color-text-white) !important;
    }

    div.title-content-met>span {
        color: var(--color-text-white) !important;
        text-shadow: 1px 2px 3px var(--color-showdow-black) !important;
    }

    div.detail-content-met {
        background-color: var(--color-text-white) !important;
    }

    div.detail-content-met>p.temp {
        border-top: 1px solid var(--color-border-grey-60) !important;
        border-bottom: 1px solid var(--color-border-grey-60) !important;
    }
}

@media (max-width: 540px) {
    .img50-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img50-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }
}

@media (min-width: 541px) {
    .img100-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img100-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    span.desc100-r {
        border: 1px dashed var(--color-border-green) !important;
    }

    span.desc100-l {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img75-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img75-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img50-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img50-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img60-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img60-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    span.desc50-r {
        border: 1px dashed var(--color-border-green) !important;
    }

    span.desc50-l {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img25-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img25-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img35-r>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }

    .img35-l>p>img {
        border: 1px dashed var(--color-border-green) !important;
    }
}

.img50-r>p>span.description-img50-r {
    color: var(--color-text-grey-60) !important;
}

/*=======================================================
  Hide for any devices
  =========================================================*/

.txt-clr1 {
    color: var(--color-text-white) !important;
}

.clr-primary {
    color: var(--color-text-gold) !important;
}

.border-t {
    border-top: 1px solid var(--color-border-grey-80) !important;
}

h2.h2__mod {
    border-bottom: 2px solid var(--color-border-green) !important;
}

h3.h3__mod {
    color: var(--color-text-dark-charcoal) !important;
}

h4.h4__mod {
    color: var(--color-text-dark-charcoal) !important;
}

a:hover>h5.h5__mod,
a:hover>div>h5.h5__mod {
    color: var(--color-text-green) !important;
}

h5.h5__mod2 {
    color: var(--color-text-green) !important;
}

a:hover>h6.h6__mod,
a:hover>div>h6.h6__mod {
    color: var(--color-text-lime-green) !important;
}

.morelists {
    background: linear-gradient(to bottom, #fff 0%, #c9c9c9 100%);
}

.buttag {
    border: 1px solid var(--color-border-grey-80) !important;
    background-color: var(--color-bg-white-smoke) !important;
}

.buttagdet {
    color: var(--color-text-shuttle-grey) !important;
}

/*=======================================================
  Main Layout
  =========================================================*/
@media (max-width: 979px) {
    .mg-add {
        border-top: 1px solid var(--color-border-philippine-gray) !important;
    }
}

.h2line {
    border-top: 1px solid var(--color-border-grey-60) !important;
}

.h2line:hover {
    color: var(--color-text-green) !important;
}

.h2line2 {
    color: var(--color-text-grey-60) !important;
    border-top: 1px solid var(--color-border-grey-80) !important;
}

/*=======================================================
  Components
  =========================================================*/

/*==================   Block-icon     =======================*/

.block-icon .icon {
    color: var(--color-text-gold) !important;
}

/*==================   V-Line    ========================*/
.v-line:before {
    background: var(--color-bg-philippine-gray) !important;
}

/*==================   G-Line    ========================*/

.g-line {
    background: var(--color-bg-philippine-gray) !important;
}

/*==================   Copyright     ====================*/

.copyright {
    color: var(--color-text-grey-80) !important;
}

.copyright span,
.copyright a {
    color: var(--color-text-lucky-grey) !important;
}

.copyright a:hover {
    color: var(--color-text-green) !important;
}

.story-image-copyright {
    background: var(--color-bg-dark-black) !important;
    color: var(--color-text-whisper) !important;
}

/*==================   Page - 404    ====================*/
/*==================   Image Properties    ====================*/

p.image-frame {
    border: 1px dashed var(--color-text-green) !important;
}

img.imgfrm01 {
    box-shadow: 0 4px 8px 0 #00000033, 0 6px 20px 0 #00000030;
}

/*========================   Block Content   ==========================*/

.content-blck {
    border-bottom: 1px dashed var(--color-border-grey-80) !important;
}

.blck-content {
    border-top: 2px solid var(--color-border-grey-60) !important;
}

.blck-40pc-hl {
    border-left: 1px solid var(--color-border-smoke) !important;
    ;
}

.blck-40pc-hl:hover {
    background-color: var(--color-bg-bone) !important;
    border-left: 1px solid var(--color-border-smoke) !important;
    ;
}

@media only screen and (max-width: 799px) {

    .blck-32pc-r {
        border-top: 2px solid var(--color-border-green) !important;
    }
}

@media (min-width: 800px) {
    .blck-50pc-l-ln {
        border-right: 1px solid var(--color-border-gray-40) !important;
        ;
    }

    .blck-60pc-l-ln {
        border-right: 1px solid var(--color-border-gray-40) !important;
        ;
    }

    .blck-40pc-r-ln {
        border-left: 1px solid var(--color-border-gray-40) !important;
        ;
    }

    .blck-72pc-l-ln {
        border-right: 2px solid var(--color-border-champagne) !important;
        ;
    }

    .blck-79pc-l-ln {
        border-right: 2px solid var(--color-border-champagne) !important;
        ;
    }

    .blck-32pc-r-ln {
        border-left: 1px solid var(--color-border-gray-40) !important;
        ;
    }

    .blck-26pc-l-ln {
        border-left: 1px solid var(--color-border-grey-80) !important;
    }

    .blck-29pc-r-ln {
        border-right: 1px solid var(--color-border-grey-80) !important;
    }

    .blck-43pc-r-ln {
        border-right: 1px solid var(--color-border-grey-80) !important;
    }
}

@media (min-width: 1200px) {
    .blck-33pc-l-ln {
        border-right: 1px solid var(--color-border-grey-80) !important;
    }

    .blck-33pc-r-ln {
        border-left: 1px solid var(--color-border-grey-80) !important;
    }
}

@media (max-width: 799px) {
    .head-topic {
        border-bottom: 1px dotted var(--color-border-silver-sand) !important;
        background-color: var(--color-bg-seashell) !important;
    }

    .head-topic-2,
    .head-topic-2 thead {
        border-bottom: 1px dotted var(--color-border-silver-sand) !important;
        background-color: var(--color-bg-seashell) !important;
    }
}

@media (min-width: 800px) {
    .head-topic {
        border-bottom: 1px dotted var(--color-border-silver-sand) !important;
        background-color: var(--color-bg-seashell) !important;
    }

    .head-topic-2,
    .head-topic-2 thead {
        border-bottom: 1px solid var(--color-border-silver-sand) !important;
        background-color: var(--color-bg-seashell) !important;
    }
}

div.examples-block {
    background-color: var(--color-bg-almond) !important;
}

div.examples-2-block {
    background-color: var(--color-bg-alice-blue) !important;
}

div.examples-3-block {
    background-color: var(--color-bg-cultured) !important;
}

/*========================   Multiple Columns    ======================*/
/*========================   Citation   ==========================*/

.ref-line {
    border-top: 1px solid var(--color-border-dark-charcoal) !important;
}

/*========================   Related Links   ==========================*/

.rel-links-end {
    border-bottom: 1px solid var(--color-border-platinum-silver) !important;
}

@media only screen and (max-width: 799px) {
    .rel-links {
        border-top: 3px double var(--color-border-dark-charcoa) !important;
    }
}

/*==================     ToTop     ======================*/

.toTop {
    color: var(--color-text-white) !important;
    background: var(--color-bg-green) !important;
}

.toTop:hover {
    color: var(--color-text-white) !important;
    background: var(--color-bg-black) !important;
}

/*==================   Tumbnail    ======================*/
.thumb_overlay {
    background: var(--color-bg-gold) !important;
    color: var(--color-text-white) !important;
}

.thumb span {
    color: var(--color-text-black) !important;
}

.thumb:hover .thumb_overlay {
    background: var(--color-bg-black) !important;
    color: var(--color-text-gold) !important;
}

/*==================   RD Mobile Menu    =====================*/
.rd-mobilemenu_ul {
    color: var(--color-text-white) !important;
    background: #fffffff2;
    box-shadow: 5px 0 5px 0 #0000001a;
}

.lt-ie9 .rd-mobilemenu_ul {
    background: linear-gradient(to bottom, #f2ffffff, #f2ffffff);
}

.rd-mobilemenu_ul li.active {
    color: var(--color-text-white) !important;
}

.rd-mobilemenu_ul li.active ul {
    color: var(--color-text-white) !important;
}

.rd-mobilemenu.active .rd-mobilemenu_ul {
    background-color: var(--color-bg-header-dark-purple) !important;
}

.rd-mobilemenu_ul a:hover {
    color: var(--color-text-white) !important;
    background: var(--color-bg-green) !important;
}

.rd-mobilemenu_ul ul {
    color: var(--color-text-white) !important;
}

.rd-mobilepanel {
    background: var(--color-bg-header-dark-purple) !important;
    color: var(--color-text-white) !important;
    box-shadow: 0 3px 3px 0 #0000001a;
}

.rd-mobilepanel_title {
    color: var(--color-text-white) !important;
}

.rd-mobilepanel_toggle {
    color: var(--color-text-white) !important;
}

.rd-mobilepanel_toggle.active:before {
    color: var(--color-text-white) !important;
}

@media (max-width: 767.9999px) {

    a.rd {
        background-color: var(--color-bg-header-purple) !important;
        color: var(--color-text-white) !important;
    }
}

/*==================  Panel Menu  ======================*/

@media (max-width: 767.9999px) {
    #panel .bs-docs-nav .navbar-header .navbar-toggle:hover {
        background: var(--color-bg-kingfisher-daisy) !important;
    }

    #panel .bs-docs-nav .navbar-header .navbar-toggle:active {
        background: var(--color-bg-kingfisher-daisy) !important;
    }

    #panel .bs-docs-nav .navbar-header .navbar-toggle:focus {
        background: var(--color-bg-kingfisher-daisy) !important;
    }

    .navbar-collapse {
        background: var(--color-bg-kingfisher-daisy) !important;
    }
}

@media (max-width: 767.9999px) and (max-height: 500px) {
    .navbar-nav .open .dropdown-menu {
        background: var(--color-bg-royal-purple) !important;
    }
}

div.navbar2-menu a {
    color: var(--color-text-white) !important;
}

div.navbar2-menu a:hover {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-dark-charcoal) !important;
}

input.navbar-search {
    background-color: var(--color-bg-bright-gray-20) !important;
}

footer {
    background: var(--color-bg-eerie-black) !important;
}

div.copyright>a {
    color: var(--color-text-american-silver) !important;
}

div.copyright>a:hover {
    color: var(--color-text-white) !important;
}

/*========================================================
  HIGHLIGHT  ///// Title
  =========================================================*/

.hl-1 {
    background: var(--color-bg-seashell) !important;
}

/*========================================================
  DESCRIPTION  ///// Article
  =========================================================*/
.desc00 {
    background: var(--color-bg-dark-gray) !important;
    color: var(--color-text-white) !important;
}

.desc01 {
    background: var(--color-bg-amounts-red) !important;
    color: var(--color-text-white) !important;
}

.desc02 {
    background-color: var(--color-bg-pastel-gray) !important;
    border-left: 5px solid var(--color-bg-taupe-gray) !important;
}

.desc03 {
    background-color: var(--color-bg-pastel-gray) !important;
}

.desc04 {
    background-color: var(--color-bg-satin-gold) !important;
}

.desc05 {
    background-color: var(--color-bg-philippine-silver) !important;
}

.desc01-text {
    color: var(--color-text-dark-charcoal) !important;
}

.desc02-head {
    background-color: var(--color-bg-bone) !important;
}

.desc02-text {
    color: var(--color-text-dark-charcoal) !important;
}

.desc00-dashed {
    border: 1px dashed var(--color-border-green) !important;
}

.desc00-dashed-4px {
    border: 4px dashed var(--color-border-green) !important;
}

.desc01bd-l {
    border: 1px dashed var(--color-border-green) !important;
}

.desc01bd-r {
    border: 1px dashed var(--color-border-green) !important;
}

.desc00-l {
    border: 1px dashed var(--color-border-green) !important;
}

.desc00-r {
    border: 1px dashed var(--color-border-green) !important;
}

.desc01-l {
    border: 1px dashed var(--color-border-green) !important;
}

.desc01-r {
    border: 1px dashed var(--color-border-green) !important;
}

/*========================================================
  DESCRIPTION  ///// Bookself
  =========================================================*/

a.books:before {
    background: #00000059;
}

.shelf {
    border-bottom: 30px solid var(--color-border-dark-gray) !important;
}

/*Example adding pseudo element to give shelf depth*/

.shelf:after {
    background: var(--color-bg-dim-gray) !important;
}

div.thumbnail_home>h3>span {
    border: 1px dashed var(--color-border-gray) !important;
}

div.thumbnail_home>h3>a {
    border: 1px dashed var(--color-border-gray) !important;
}

div.thumbnail_home>h3>a:hover {
    border: 1px dashed var(--color-border-white) !important;
    background-color: var(--color-bg-green) !important;
    color: var(--color-text-white) !important;
}

div.thumbnail_home > p{
    color: var(--color-text-black) !important;
}

@media (min-width: 1366px) and (max-width: 1541.9998px) {
    div.thumbnail_home>h3>span {
        border: 1px dashed var(--color-border-gray) !important;
    }

    div.thumbnail_home>h3>a {
        border: 1px dashed var(--color-border-gray) !important;
    }

    div.thumbnail_home>h3>a:hover {
        border: 1px dashed var(--color-border-white) !important;
        background-color: var(--color-bg-green) !important;
        color: var(--color-text-white) !important;
    }
}

/*========================================================
  DESCRIPTION  ///// tab-content
  =========================================================*/

div.tab-content h2 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 2px solid var(--color-border-green) !important;
}

div.tab-content h3 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 1px solid var(--color-border-green) !important;
}

div.tab-content h4 {
    color: var(--color-text-dark-charcoal) !important;
}

div.tab-content h5 {
    color: var(--color-text-dark-charcoal) !important;
}

div.tab-content-2 h2 {
    color: var(--color-text-dark-charcoal) !important;
}

div.tab-content-block h2 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 2px solid var(--color-border-green) !important;
}

div.tab-content-block h3 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 1px solid var(--color-border-green) !important;
}

div.tab-content-block h4 {
    color: var(--color-text-dark-charcoal) !important;
}

div.tab-content-block h5 {
    color: var(--color-text-dark-charcoal) !important;
}

div.tab-content-block h6 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 1px solid var(--color-border-green) !important;
}

div.tab-content-block-2 h2 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 2px solid var(--color-border-green) !important;
}

.eomq-bg-top>* div.bg-primary h1 {
    border-bottom: 5px solid var(--color-border-approx-indigo) !important;
}

.eomq-bg-top>* div.tab-content-block h2 {
    border-bottom: 2px solid var(--color-border-approx-indigo) !important;
}

.eomq-bg-top>* div.tab-content-block h3 {
    border-bottom: 1px solid var(--color-border-approx-indigo) !important;
}


div.tab-content-block-2 h3 {
    color: var(--color-text-dark-charcoal) !important;
    border-bottom: 1px solid var(--color-border-green) !important;
}

div.tab-content-block-2 h4 {
    color: var(--color-text-dark-charcoal) !important;
}

div.tab-content-block-2 h5 {
    color: var(--color-text-dark-charcoal) !important;
}

/*========================================================
  Pagination
  =========================================================*/
.total_row {
    color: var(--color-text-dark-charcoal) !important;
}

.total_row_result {
    color: var(--color-text-white) !important;
    background: var(--color-bg-green) !important;
}

#pagination a,
#pagination strong {
    background: var(--color-bg-platinum) !important;
    border: 1px solid var(--color-border-white) !important;
}

#pagination a:hover {
    color: var(--color-text-dark-charcoal) !important;
}

#pagination strong {
    color: var(--color-text-white) !important;
    background: var(--color-bg-green) !important;
}

/*========================================================
  Background Fixed
  =========================================================*/