:root {
   --color-body-backgroundcolor-main-center-container: #020202 !important; /* use */
   --color-side-shadow-container-main-center: #545450e0; /* use */
   --color-bg-tag: #141414;
   --color-bg-footer-container: #020202;

   --color-pagination-link-color: #000;
   --color-pagination-link-background: #fff;
   --color-pagination-link-border: 1px solid #dee2e6;
   --color-pagination-link-hover-background: #F9F80D;
   --color-pagination-link-hover-color: #202020;
   --color-pagination-link-hover-border: #373c53;
   --color-pagination-active-background: #F9F80D;
   --color-pagination-active-color: #202020;
   --color-pagination-link-next-prev-color: #000;
   --color-pagination-link-next-prev-color-hover: #000;

   --color-solid-line-border: 3px solid #F9F80D;

   --color-sidebar-section-h4-background: #F9F80D; /*  ต่างจาก #4b4b4b */
   --color-sidebar-section-col-6-hover-background: #F9F80D; /*  ต่างจาก #525252 */
   --color-font-sidebar-h4: #202020;

   --color-card-body-background: #020202; /*  ต่างจาก #151313 */
   --color-card-title-background: #020202; /*  ต่างจาก #151313 */

   --color-footer-color: #020202; /*  ต่างจาก #000000 */
   --color-footer-backgroundcolor: #020202; /*  ต่างจาก #000000 */
   --color-footer-boxshadow: 0px -1px 8px 0px #545450e0; /*  ต่างจาก #000 */

   --color-icon-menu-header-backgroundcolor: #020202; /*  ต่างจาก var(--light-grey) */
   --color-nav-menu-background: #020202; /*  ต่างจาก #2a2a2a */
   --color-nav-menu-boxshadow: 0 0px 4px 3px #545450e0; /*  ต่างจาก #090907e0 */
   --color-wrap-header-background: #020202; /*  ต่างจาก #2a2a2a */
   --color-dropdown-menu-background: #2a2a2a; /*  ต่างจาก #4b4b4b */

   --color-h-all-card-header: #000;

   /********************** ข้างบนนี้ คัด แล้ว ******************************/

   --color-all-star-color: #ffffff; /* จากคลาส * บรรทัด 7 */
   --color-html-color: #000000; /* จากคลาส html บรรทัด 11 */
   --color-html-backgroundcolor: #000000; /* จากคลาส html บรรทัด 11 */
   --color-body-color: #ffffff; /* จากคลาส body บรรทัด 15 */
   --color-body-backgroundcolor: #000000; /* จากคลาส body บรรทัด 16 */
   --color-bodybefore-color: #000000; /* จากคลาส body::before บรรทัด 19 */
   --color-bodybefore-backgroundcolor: #000000; /* จากคลาส body::before บรรทัด 19 */
   --color-bodyafter-color: rgba(0,0,0,.45); /* จากคลาส body::after บรรทัด 22 */
   --color-bodyafter-backgroundcolor: #020202; /* จากคลาส body::after บรรทัด 22 */

   /*--color-body-backgroundcolor-main-center-container: #020202 !important; !* use *!*/
   /*--color-side-shadow-container-main-center: #545450e0; !* use *!*/

   /*--color-bg-tag: #141414;*/

   --color-c-offcanvas-background: #020202; /* จากคลาส .c-offcanvas บรรทัด 25 */

   --color-view-all-cat-color: #d60303; /* จากคลาส .view-all-cat บรรทัด 28 */
   --color-view-all-cathover-color: #ff4444; /* จากคลาส .view-all-cat:hover บรรทัด 31 */

   --color-divblock-background: #1c1303; /* จากคลาส div.block บรรทัด 34 */
   --color-divblock-border: 4px solid #d60303; /* จากคลาส div.block บรรทัด 35 */

   --color-divblock-ribbonribbon1-background: #d60303; /* จากคลาส div.block .ribbon.ribbon1 บรรทัด 38 */
   --color-divblock-ribbonribbon1-boxshadow: 0 0 4px 0px #000; /* จากคลาส div.block .ribbon.ribbon1 บรรทัด 39 */
   --color-divblock-ribbonribbon2-background: #a50000; /* จากคลาส div.block .ribbon.ribbon2 บรรทัด 42 */
   --color-divblock-ribbonribbon2-boxshadow: 0 0 4px 0px #000; /* จากคลาส div.block .ribbon.ribbon2 บรรทัด 43 */

   --color-wrap-img-content-img-boxshadow: 0 0 11px 2px #d60303; /* จากคลาส .wrap-img-content img บรรทัด 46 */

   --color-play-btn-background: radial-gradient(rgb(42 0 0 / 60%) 60%, rgb(245 245 243) 62%); /* จากคลาส .play-btn บรรทัด 49 */
   --color-play-btn-boxshadow: 0px 0px 8px 1px rgba(255, 60, 0, 0.56); /* จากคลาส .play-btn บรรทัด 50 */
   --color-play-btnbefore-border: 5px solid rgba(214, 3, 3, 0.75); /* จากคลาส .play-btn:before บรรทัด 53 */

   /*--color-footer-color: #020202; !* จากคลาส .footer บรรทัด 59 *!*/
   /*--color-footer-backgroundcolor: #020202; !* จากคลาส .footer บรรทัด 59 *!*/
   /*--color-footer-boxshadow: 0px -1px 8px 0px #545450e0; !* จากคลาส .footer บรรทัด 60 *!*/

   --color-footer-col-h4-color: #ffffff; /* จากคลาส .footer-col h4 บรรทัด 63 */
   --color-footer-col-h4before-color: #d60303; /* จากคลาส .footer-col h4::before บรรทัด 66 */
   --color-footer-col-h4before-backgroundcolor: #d60303; /* จากคลาส .footer-col h4::before บรรทัด 66 */

   --color-footer-col-ul-li-a-color: #bbbbbb; /* จากคลาส .footer-col ul li a บรรทัด 69 */
   --color-footer-col-ul-li-ahover-color: #ffffff; /* จากคลาส .footer-col ul li a:hover บรรทัด 72 */

   --color-footer-col-social-links-a-color: rgba(255,255,255,0.2); /* จากคลาส .footer-col .social-links a บรรทัด 75 */
   --color-footer-col-social-links-a-backgroundcolor: rgba(255,255,255,0.2); /* จากคลาส .footer-col .social-links a บรรทัด 75 */
   --color-footer-col-social-links-ahover-color: #d60303; /* จากคลาส .footer-col .social-links a:hover บรรทัด 79 */
   --color-footer-col-social-links-ahover-backgroundcolor: #d60303; /* จากคลาส .footer-col .social-links a:hover บรรทัด 79 */
   --color-footer-col-social-links-ahover-i-color: #ffffff !important; /* จากคลาส .footer-col .social-links a:hover i บรรทัด 82 */

   /*--color-bg-footer-container: #020202;*/

   /* main-app.css */
   --color-bow-parts-backgroundcolor: rgba(42, 0, 0, 0.8); /* .bow-parts background-color */
   --color-bow-parts-color: white; /* .bow-parts text color */
   --color-bow-parts-border: 2px solid #1e1f06;

   --color-sidebar-section-background: #08070652;
   --color-sidebar-section-border: 1px solid #67676787;
   /*--color-sidebar-section-h4-background: #890b04;*/
   --color-sidebar-section-h4-boxshadow: inset 0px 0px 2px 1px #313131;
   --color-sidebar-section-col-6-border: 1px solid #52525233;
   /*--color-sidebar-section-col-6-hover-background: #890b04;*/

   --color-card-img-top-boxshadow: 0px -1px 1px 0px rgb(171 171 171 / 67%);
   --color-card-movie-background: #151313;
   --color-card-movie-boxshadow: 2px 2px 8px 0.5px rgba(58, 58, 58, 0.88);
   --color-card-movie-hover-boxshadow: 1px 0px 5px 2px rgba(112, 112, 112, 0.88);

   --color-card-body-boxshadow: inset 0px -2px 1px 0px rgb(110 107 107 / 0.63), 0px -5px 8px 1px #2825257a;
   /*--color-card-body-background: #020202;*/
   /*--color-card-title-background: #020202;*/

   --color-select2-input-color: #000;
   --color-select2-option-color: #000;

   --color-active-ep-background: #0a0d0d;
   --color-active-ep-border: 1px solid #5d5d5d;

   --color-user-icon-button-background: #f1f1f1;
   --color-user-icon-button-border: 1px solid #ccc;
   --color-user-icon-button-color: #000;

   --color-user-dropdown-background: white;
   --color-user-dropdown-border: 1px solid #ccc;
   --color-user-dropdown-link-background: #fae8e8;
   --color-user-dropdown-link-border: 2px solid #562d2d;
   --color-user-dropdown-link-hover-color: #f00;

   --color-live-content-background: #2f2f2f;
   --color-live-content-border: 1px solid #ddd;
   --color-live-content-boxshadow: 0 2px 10px rgba(0, 0, 0, 0.1);

   --color-live-content-a-background: #007bff;
   --color-live-content-a-color: #fff;
   --color-live-content-a-hover-background: #0056b3;

   /*--color-solid-line-border: 3px solid #890b04;*/

   /*--color-pagination-link-color: #000;*/
   /*--color-pagination-link-background: #fff;*/
   /*--color-pagination-link-border: 1px solid #dee2e6;*/
   /*--color-pagination-link-hover-background: #890b04;*/
   /*--color-pagination-link-hover-color: #fff;*/
   /*--color-pagination-link-hover-border: #373c53;*/
   /*--color-pagination-active-background: #890b04;*/
   /*--color-pagination-active-color: #fff;*/
   /*--color-pagination-link-next-prev-color: #000;*/
   /*--color-pagination-link-next-prev-color-hover: #fff;*/

   --color-btn-media-sync-background: linear-gradient(135deg, #525252, #525252);
   --color-btn-media-sync-color: #fff;
   --color-btn-media-sync-hover-background: linear-gradient(135deg, #525252, #737373);

   /* main-nav.css*/
   --color-a-color: inherit; /* จาก a */
   --color-button-border: none; /* จาก button */
   --color-button-backgroundcolor: transparent; /* จาก button */
   --color-button-color: inherit; /* จาก button */

   /*--color-icon-menu-header-backgroundcolor: #020202; !* จาก .icon-menu-header *!*/

   /*--color-nav-menu-background: #020202; !* จาก #nav-menu *!*/
   /*--color-nav-menu-boxshadow: 0 0px 4px 3px #545450e0; !* จาก #nav-menu *!*/

   /*--color-wrap-header-background: #020202; !* จาก #wrap-header.container *!*/

   --color-nav-menu-dropdown-li-border-bottom: 1px solid #959595; /* จาก #nav-menu .dropdown-menu li */

   /*--color-dropdown-menu-background: #2a2a2a; !* จาก .dropdown-menu *!*/
   --color-dropdown-menu-item-color: #fff; /* จาก .dropdown-menu .dropdown-item */
   --color-dropdown-menu-item-hover-bg: #81817de0; /* จาก .dropdown-menu .dropdown-item:hover */

   --color-search-input-background: #1b1d1b; /* จาก .search input */
   --color-search-input-border: 2px solid #f1d40e; /* จาก .search input */
   --color-search-input-boxshadow: 1px 1px 1px #0c0e0b; /* จาก .search input */

   --color-search-icon: #f3f3f3; /* จาก .search .bx-search */
   --color-search-icon-before: #dbe907; /* จาก .search .bx-search::before */

   --color-webkit-search-cancel-button-background:
           linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
           linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%); /* จาก ::-webkit-search-cancel-button */

   --color-autofill-text: #fff; /* จาก input:-webkit-autofill */
   --color-autofill-background: #1b1d1b; /* จาก input:-webkit-autofill */

   --color-nav-link-color: #fff; /* จาก .nav-link */

   --color-nav-link-hover: #ffca2c; /* จาก .nav-scroller a.nav-link:hover */

   --color-nav-scroller-background: #1a2f16; /* จาก .nav-scroller */
   --color-nav-scroller-boxshadow: 0px 0px 4px 1px #a8a8068c; /* จาก .nav-scroller */

   --color-nav-scroller-nav-boxshadow: inset 0px -11px 9px 4px #2b2d09; /* จาก .nav-scroller .nav */
}

* {
   /*color: var(--color-all-star-color);*/
}
html {
   background-color: var(--color-html-backgroundcolor);
}
body {
   color: var(--color-body-color);
   background-color: var(--color-body-backgroundcolor);
}
body::before {
   background-color: var(--color-bodybefore-backgroundcolor);
}
body::after {
   background-color: var(--color-bodyafter-backgroundcolor);
}

.container, #movie-page.container, #relate-movies.container {
   background: var(--color-body-backgroundcolor-main-center-container);
}

#movie-page.container .card-header {
   background: var(--color-sidebar-section-h4-background);
}

#movie-page.container {
   box-shadow: 0 0 9px 0 var(--color-side-shadow-container-main-center);
}

#main-content {
   box-shadow: 0 0 9px 0 var(--color-side-shadow-container-main-center);
}

.wrap-tag {
   background-color: var(--color-bg-tag);
}

.c-offcanvas {
   background: var(--color-c-offcanvas-background);
}
.view-all-cat {
   color: var(--color-view-all-cat-color);
}
.view-all-cat:hover {
   color: var(--color-view-all-cathover-color);
}
div.block {
   background: var(--color-divblock-background);
   border: var(--color-divblock-border);
}
div.block .ribbon.ribbon1 {
   background: var(--color-divblock-ribbonribbon1-background);
   box-shadow: var(--color-divblock-ribbonribbon1-boxshadow);
}
div.block .ribbon.ribbon2 {
   background: var(--color-divblock-ribbonribbon2-background);
   box-shadow: var(--color-divblock-ribbonribbon2-boxshadow);
}
.wrap-img-content img {
   box-shadow: var(--color-wrap-img-content-img-boxshadow);
}
.play-btn {
   background: var(--color-play-btn-background);
   box-shadow: var(--color-play-btn-boxshadow);
}
.play-btn:before {
   border: var(--color-play-btnbefore-border);
}
.play-btn:after {
   border-left: 17px solid #fff;
}
.footer {
   background-color: var(--color-footer-backgroundcolor);
   box-shadow: var(--color-footer-boxshadow);
}
.footer-col h4 {
   color: var(--color-footer-col-h4-color);
}
.footer-col h4::before {
   background-color: var(--color-footer-col-h4before-backgroundcolor);
}
.footer-col ul li a {
   color: var(--color-footer-col-ul-li-a-color);
}
.footer-col ul li a:hover {
   color: var(--color-footer-col-ul-li-ahover-color);
}
.footer-col .social-links a {
   background-color: var(--color-footer-col-social-links-a-backgroundcolor);
   color: var(--color-footer-col-social-links-a-color);
}
.footer-col .social-links a:hover {
   background-color: var(--color-footer-col-social-links-ahover-backgroundcolor);
}
.footer-col .social-links a:hover i {
   color: var(--color-footer-col-social-links-ahover-i-color);
}

/* main-app.css */

.bow-parts {
   background-color: var(--color-bow-parts-backgroundcolor);
   color: var(--color-bow-parts-color);
   border: var(--color-bow-parts-border);
}

.sidebar-section {
   background-color: var(--color-sidebar-section-background);
   border: var(--color-sidebar-section-border);
}

.sidebar-section h4 {
   background-color: var(--color-sidebar-section-h4-background);
   box-shadow: var(--color-sidebar-section-h4-boxshadow);
   color: var(--color-font-sidebar-h4);
}

.sidebar-section .col-6 {
   border: var(--color-sidebar-section-col-6-border);
}

.sidebar-section .col-6:hover {
   background-color: var(--color-sidebar-section-col-6-hover-background);
   color: var(--color-font-sidebar-h4);
}

.card-img-top {
   box-shadow: var(--color-card-img-top-boxshadow);
}

.card-movie {
   background-color: var(--color-card-movie-background);
   box-shadow: var(--color-card-movie-boxshadow);
}

.card-movie:hover {
   box-shadow: var(--color-card-movie-hover-boxshadow);
}

.card-body {
   box-shadow: var(--color-card-body-boxshadow);
   background-color: var(--color-card-body-background);
}

.card-title {
   background-color: var(--color-card-title-background);
}

.select2-search__field,
.select2-results__option {
   color: var(--color-select2-input-color);
}

.active-ep {
   background-color: var(--color-active-ep-background);
   border: var(--color-active-ep-border);
}

.user-icon button {
   background-color: var(--color-user-icon-button-background);
   border: var(--color-user-icon-button-border);
   color: var(--color-user-icon-button-color);
}

.user-dropdown {
   background-color: var(--color-user-dropdown-background);
   border: var(--color-user-dropdown-border);
}

.user-dropdown a {
   background-color: var(--color-user-dropdown-link-background);
   border-top: var(--color-user-dropdown-link-border);
}

.user-dropdown a:hover {
   color: var(--color-user-dropdown-link-hover-color);
}

.live-content {
   background-color: var(--color-live-content-background);
   border: var(--color-live-content-border);
   box-shadow: var(--color-live-content-boxshadow);
}

.live-content a {
   background-color: var(--color-live-content-a-background);
   color: var(--color-live-content-a-color);
}

.live-content a:hover {
   background-color: var(--color-live-content-a-hover-background);
}

.solid-line {
   border-bottom: var(--color-solid-line-border);
}

.page-item .page-link {
   color: var(--color-pagination-link-color);
   background-color: var(--color-pagination-link-background);
   border: var(--color-pagination-link-border);
}

.page-item .page-link:hover {
   color: var(--color-pagination-link-hover-color);
   background-color: var(--color-pagination-link-hover-background);
   border-color: var(--color-pagination-link-hover-border);
}

.page-item.active .page-link {
   color: var(--color-pagination-active-color);
   background-color: var(--color-pagination-active-background);
   border-color: var(--color-pagination-active-background);
}

.page-item:last-child .page-link span, .page-item:first-child .page-link span {
   color: var(--color-pagination-link-next-prev-color) !important;
}

.page-item:last-child:hover .page-link span, .page-item:first-child:hover .page-link span {
   color: var(--color-pagination-link-next-prev-color-hover) !important;
}

.btn-media-sync {
   background: var(--color-btn-media-sync-background);
   color: var(--color-btn-media-sync-color);
}

.btn-media-sync:hover {
   background: var(--color-btn-media-sync-hover-background);
}

.footer .container {
   background: var(--color-bg-footer-container);
}

/* main-nav */
a {
   text-decoration: none;
   color: var(--color-a-color);
}

button {
   border: var(--color-button-border);
   background-color: var(--color-button-backgroundcolor);
   cursor: pointer;
   color: var(--color-button-color);
}

.icon-menu-header {
   background-color: var(--color-icon-menu-header-backgroundcolor);
}

#nav-menu {
   background: var(--color-nav-menu-background);
   box-shadow: var(--color-nav-menu-boxshadow);
}

#wrap-header.container {
   background: var(--color-wrap-header-background);
}

#nav-menu .dropdown-menu li:not(:last-child) {
   border-bottom: var(--color-nav-menu-dropdown-li-border-bottom);
}

.dropdown-menu {
   background: var(--color-dropdown-menu-background);
}

.dropdown-menu .dropdown-item {
   color: var(--color-dropdown-menu-item-color);
}

.dropdown-menu .dropdown-item:hover {
   background-color: var(--color-dropdown-menu-item-hover-bg);
}

.search input {
   background-color: var(--color-search-input-background);
   border: var(--color-search-input-border);
   box-shadow: var(--color-search-input-boxshadow);
}

.search .bx-search {
   color: var(--color-search-icon);
}

.search .bx-search::before {
   color: var(--color-search-icon-before) !important;
}

input[type="search" i]::-webkit-search-cancel-button {
   background: var(--color-webkit-search-cancel-button-background);
}

input:-webkit-autofill {
   -webkit-text-fill-color: var(--color-autofill-text) !important;
   background-color: var(--color-autofill-background) !important;
}

.nav-link {
   color: var(--color-nav-link-color);
}

.nav-scroller a.nav-link:hover i,
.nav-scroller a.nav-link:hover span.text-block-nav-link {
   color: var(--color-nav-link-hover);
}

.nav-scroller {
   background: var(--color-nav-scroller-background);
   box-shadow: var(--color-nav-scroller-boxshadow);
}

.nav-scroller .nav {
   box-shadow: var(--color-nav-scroller-nav-boxshadow);
}

.logo img {
   width: auto;
   height: 53px;
}

.card-header * {
   color: var(--color-h-all-card-header);
}