/* default, light mode styles set with variables */
:root {
    --watch-body-bg:#ffffff;
    --watch-body-color:#222222;
    --watch-backtop-bg:#cfcfcf;
    --watch-title-bg:#ffffff;
    --watch-title-color:#000000;
    --watch-title-after:#e5e5e5;
    --watch-headwidget-before:#000000;
    --watch-listitem-view:#222222;
    --watch-popular-border:#e9e9e9;
    --watch-wraplong-bg:#ebebeb;
    --watch-brandScroll2-bg:#ffffff;
    --watch-recommendbrand-bg:#f9f9f9;
    --watch-recommendbrand-border: #f0f0f0;
    --watch-recommendbrand-color:#272727;
    --watch-recommendbrand-btn:#272727;
    --watch-recommend-btn:#272727;
    --watch-columnbtm-bg:#f1f1f1;
    --watch-block3-hover:#f1f1f1;
    --watch-topview-color:#333333;
    --watch-block3-span:#555555;
    --watch-breakingnews-border: #9E9E9E;
    --watch-screensize-bg:#353535;
    --watch-sort-border:#ebebeb;
    --watch-lunch-bordertop:#3d3d3d;
    --watch-blackwhite-color:#000000;
    --watch-sortfilter-color:rgba(50, 50, 50, 0.6);
    
    --watch-dropdown3-after:#464646 transparent;
    --watch-dropdown3list-bg:#ffffff;
    --watch-dropdown3list-border:#eeeeee;
    --watch-dropdown3list-hover:#f0f0f0;

    --watch-slider-color:#222222;
    --watch-slider-bg:#ededed;
    --watch-placeholder-color:#222222;
    --watch-btnmore-bg:#f6f6f6;
    --watch-btnmore-color:#333333;

    
    --watch-listgrid-active-border:#222222;
    --watch-listgrid-border:#eeeeee;
    --watch-listgrid-color:#212529;
    --watch-clear-bg:#222222;
    --watch-clear-color:#ffffff;
    --watch-demo2-border:#646464;
    --watch-demo2-bg:#d7d7d7;
    --watch-tablist-bg:#ffffff;
    --watch-tablist-border:#eeeeee;
    --watch-scrollbar-track:#dddddd;
    --watch-scrollbar:#ebebeb;
    --watch-scrollbar-thumb:rgba(0,0,0,.25);
    --watch-brandlist-bg:#f5f5f5;
    --watch-gradient-sortprice:linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%,rgba(255,255,255,0) 100%);
    --watch-gradient-label:-webkit-linear-gradient(#000, hsla(0, 0%, 20%, 0));
    --watch-modal-bg:#ffffff;
    --watch-modal-border:#dee2e6;
    --watch-modalletter-color:#ffffff;
    --watch-modalletter-bg:#222222;
    --watch-modal-dt:#000000;
    --watch-modal-dd:#222222;
    --watch-modal-close:#dddddd;
    --watch-brandlist-color:#222222;
    --watch-list-bg:#ffffff;
    --watch-list-border:#000000;

    --watch-brandtext-bg:#ffffff;
    --watch-brandtext-border:#e4e4e4;
    --watch-breadcrumb-bg:#ffffff;
    --watch-breadcrumb-border:rgba(237,237,237,1);
    --watch-breadcrumb-color:#222222;
}
/*dark-mode styles*/
.dark-mode {
    --watch-body-bg:#222222;
    --watch-body-color:#dddddd;
    --watch-backtop-bg:#353535;
    --watch-title-bg:#222222;
    --watch-title-color:#ffffff;
    --watch-title-after:#505050;
    --watch-headwidget-before:#ffffff;
    --watch-listitem-view:#898989;
    --watch-popular-border:#666666;
    --watch-wraplong-bg:#333333;
    --watch-brandScroll2-bg:#4a4a4a;
    --watch-recommendbrand-bg:#333333;
    --watch-recommendbrand-border:#666666;
    --watch-recommendbrand-color:#dddddd;
    --watch-recommendbrand-btn:linear-gradient(to right, #4096ee 0%,#2a84e1 100%);
    --watch-recommend-btn:#dddddd;

    --watch-dropdown3-after:#cecece transparent;
    --watch-dropdown3list-bg:#777777;
    --watch-dropdown3list-border:#6b6b6b;
    --watch-dropdown3list-hover:#656565;

    --watch-columnbtm-bg:#191919;
    --watch-block3-hover:#4e4e4e;
    --watch-topview-color:#dddddd;
    --watch-block3-span:#a2a0a0;
    --watch-breakingnews-border:#585858;
    --watch-screensize-bg:#4e4e4e;
    --watch-sort-border:#666666;
    --watch-lunch-bordertop:#6d6d6d;
    --watch-blackwhite-color:#ffffff;
    --watch-sortfilter-color:rgb(255 255 255 / 60%);

    --watch-slider-color:#dddddd;
    --watch-slider-bg:#6d6d6d;
    --watch-placeholder-color:#dddddd;
    --watch-btnmore-bg:#444444;
    --watch-btnmore-color:#dddddd;
    
    
    --watch-listgrid-active-border:#eaeaea;

    --watch-listgrid-border:#585858;
    --watch-listgrid-color:#797979;
    --watch-clear-bg:#777777;
    --watch-clear-color:#ffffff;
    --watch-demo2-border:#eeeeee;
    --watch-demo2-bg:#eeeeee;
    --watch-demo2-color:#222222;
    --watch-tablist-bg:#292929;
    --watch-tablist-border:#5f5f5f;
    --watch-scrollbar-track:#5d5c5c;
    --watch-scrollbar:#222222;
    --watch-scrollbar-thumb:rgba(0,0,0,.25);
    --watch-brandlist-bg:#777777;
    --watch-gradient-sortprice:linear-gradient(to bottom, rgb(255 255 255 / 5%) 0%,rgb(0 0 0 / 0%) 100%);
    --watch-gradient-label:-webkit-linear-gradient(#fff, hsla(0, 0%, 20%, 0));
    --watch-modal-bg:#464646;
    --watch-modal-border:#666666;
    --watch-modalletter-color:#222222;
    --watch-modalletter-bg:#f1f1f1;
    --watch-modal-dt:#ffffff;
    --watch-modal-dd:#dddddd;
    --watch-modal-close:#666666;
    --watch-brandlist-color:#dddddd;
    --watch-list-bg:#222222;
    --watch-list-border:#666666;
    --watch-brandtext-bg:#777777;
    --watch-brandtext-border:#777777;

    --watch-breadcrumb-bg:#222222;
    --watch-breadcrumb-border:rgb(70, 70, 70);
    --watch-breadcrumb-color:rgba(255, 255, 255, 0.65);
}
.mode-switch {
    display: block !important;
}

body , #wrapper{
    background: var(--watch-body-bg);
    color: var(--watch-body-color);
}
body.dark-mode{background-color:#222222;}
.title_image h1, .title_image h2, .header-widget h2, .header-widget-left h2{
    background: var(--watch-title-bg);
    color:var(--watch-title-color);
}
.title_image h1 a{
    color:var(--watch-title-color);
}
.title_image:after, .beginnerGuide .title_image:after, #buyingGuide .title_image:after{
    background:var(--watch-title-after);
}
.header-widget:before{
    background-color: var(--watch-headwidget-before);
}
.smartwatch_popular_name .list-view{
    color:var(--watch-listitem-view);
}
.smartwatch_popular_number,.smartwatch_popular_name a{
    color:var(--watch-blackwhite-color);
}
.smartwatch_popular ul li{
    border-bottom: 1px dashed var(--watch-popular-border);
}
.well{
    border-bottom: 1px dotted  var(--watch-popular-border);
}
.well p{

    color:var(--watch-body-color);
}
.dark-mode .brand_logo {
    margin-bottom: 20px;
    text-align: center;
}
.dark-mode .brand_logo img {
    background: #fff;
    border-radius: 8px;
}
.last_news p a{
    color:var(--watch-body-color);
}
.wrap-long-content, .quick_search{
    background-color: var(--watch-wraplong-bg);
}
#brandScroll2, .category_review, #select_smartwatch{
    background-color: var(--watch-brandScroll2-bg);
}
.btn-group #grid.active, .btn-group #list.active{
    border: 1px solid var(--watch-listgrid-active-border);
}
.btn-group #grid, .btn-group #list {
    border: 1px solid var(--watch-listgrid-border);
    color: var(--watch-listgrid-color);
}
.dark-mode .grid-group-item img {
    border-radius: 8px;
}
.list-group-item{
    background-color: var(--watch-list-bg);
    border-bottom: 1px dotted var(--watch-list-border);
}
.dark-mode .list-group-item:before, .dark-mode .list-group-item:hover:before{
    border-color:transparent;
}
.dark-mode .list-group-item .linkmore a.btn-more{
    border:1px solid #fff;
}
.wrapper-dropdown-3 .dropdown li.brand_textbox input{
    background:var(--watch-brandtext-bg);
    border-color:var(--watch-brandtext-border);
}

.recommendList, .randomBrand,.allListBrand a{
    background:var(--watch-recommendbrand-bg) ;
    border-color:var(--watch-recommendbrand-border);
}
.recommendList p{
    color:var(--watch-recommendbrand-color);
}
.allListBrand a{
    color:var(--watch-recommend-btn) !important;
}
.btn-list-phone{
    background: var(--watch-recommendbrand-btn);
}
.column-bottom{
    background: var(--watch-columnbtm-bg);
}
.block-three, .block-three ul li{
    background: var(--watch-body-bg);
}
.block-three h3, .block-three ul li .name a, .btn-price{
    color:var(--watch-body-color);
}
.block-three ul li:hover{
    background: var(--watch-block3-hover);
    border-radius: 8px 8px;
}
.dark-mode .top-views .icon-user{
    filter: invert(1);
}
.top-views a{
    color:var(--watch-topview-color);
}
.block-three h3 span{
    color:var(--watch-block3-span);
}
#interest ul li .number{
    background: var(--watch-body-color);
    color:var(--watch-body-bg);
}


#back-top span {
    background: var(--watch-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
    background-size: 25px;
}
.dark-mode #back-top span {
    background: var(--watch-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
    background-size: 25px;
}

/* Search Filter */
#q{
    background: #fff url(//www.siamphone.com/images/search_box.png) no-repeat 3px 10px;
}
.dark-mode .search-home .input_qs_spc #q {
    background: #4a4a4a url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 16px;
    background-size: 15px;
}

#brand_model{
    background: #fff url(https://www.siamphone.com/images/magnifying2.png) no-repeat 2px 4px;
    background-size: 35px;
}
.dark-mode #brand_model{
    background: #292929 url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 13px;
    background-size: 20px;
}
.category_review_item p, .wrapper-dropdown-3 span.showtext, .wrapper-dropdown-3 .dropdown li label{
    color:var(--watch-slider-color);
}
.slider{
    background:var(--watch-slider-bg);
}
.wrapper-dropdown-3 .dropdown li.brand_textbox input::placeholder,
.search-home .input_qs_spc #select_smartwatch::placeholder, 
#brand_model::placeholder{
    color:var(--watch-placeholder-color);
}
.btnMore a{
    background-color: var(--watch-btnmore-bg);
    color:var(--watch-btnmore-color);
}

.dark-mode .category ul li em, .dark-mode .network .dropdown li label em, .dark-mode .display_diagonal ul li em, .dark-mode .os_name .tab-list li img {
    filter: invert(0.9);
}
.dark-mode .tab-list input:checked + li.radio em, .dark-mode .network .dropdown input:checked + li.checkbox em {
    filter: none;
}
#demo2{
    color:var(--watch-demo2-color);
    border:0;
    border-color:var(--watch-demo2-border);
    border-radius: 3px;
    background-color: var(--watch-demo2-bg);
}
#clear-form{
    background-color: var(--watch-clear-bg);
    color:var(--watch-clear-color);
}

#brandScroll::-webkit-scrollbar-track, #brandScroll_e::-webkit-scrollbar-track, .brand-recommend::-webkit-scrollbar-track,.brand-all::-webkit-scrollbar-track{background-color:var(--watch-scrollbar-track);}
#brandScroll::-webkit-scrollbar, #brandScroll_e::-webkit-scrollbar, .brand-recommend::-webkit-scrollbar, .brand-all::-webkit-scrollbar{background-color:var(--watch-scrollbar);}
#brandScroll::-webkit-scrollbar-thumb, #brandScroll_e::-webkit-scrollbar-thumb, .brand-recommend::-webkit-scrollbar-thumb,.brand-all::-webkit-scrollbar-thumb{background-color:var(--watch-scrollbar-thumb);}


#style-1::-webkit-scrollbar-track{background-color: var(--watch-scrollbar-track);}
#style-1::-webkit-scrollbar{background-color: var(--watch-scrollbar);}
#style-1::-webkit-scrollbar-thumb{background-color: var(--watch-scrollbar-thumb);}

.brand_list li:nth-child(-n+12){
    background-color: var(--watch-brandlist-bg);
}
.brand-recommend li a, .brand-all li a{
    color:var(--watch-brandlist-color);
}
.dark-mode .brand-recommend li img{
    border-radius: 8px;
}
.gradientRead .network .dropdown li label, .gradientRead .sort-price li label {
    background: var(--watch-gradient-label);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
.gradientRead .network, .gradientRead .sort-price {
    background: var(--watch-gradient-sortprice);
}

.wrapper-dropdown-3:after{
    border-color:var(--watch-dropdown3-after);
}
.wrapper-dropdown-3 .dropdown{
    background:var(--watch-dropdown3list-bg);
}
.wrapper-dropdown-3 .dropdown li{
    border-color:var(--watch-dropdown3list-border);
}
.wrapper-dropdown-3 .dropdown li:hover{
    background-color:var(--watch-dropdown3list-hover);
}
.modal-content{
    background:var(--watch-modal-bg);
}
.modal-header{
    border-color:var(--watch-modal-border);
}
.tab_letter ul li a{
    color: var(--watch-modalletter-color);
    background: var(--watch-modalletter-bg);
}
 .brand-all dd a{
    color:var(--watch-modal-dd);
}
.brand-all dt a, .brand-all dd strong{
    color:var(--watch-modal-dt);
}
.dark-mode .brand-all dd{
    background-image: url("https://www.siamphone.com/images/fullstop_wh.png");
}
.modal-header .close{
    border-color:var(--watch-modal-close);
    text-shadow: none;
}
.dark-mode .modal-header .close{
    filter:invert(1);
}
.grid-group-item .smartwatch-name a, .grid-group-item .smartwatch-price a{
    color:var(--watch-blackwhite-color);
}
#breadcrumb_cover{
    background: var(--watch-breadcrumb);
}
#breadcrumb_list{
    text-shadow:none;
    background: var(--watch-breadcrumb-bg);
    border: 1px solid var(--watch-breadcrumb-border);
}
#breadcrumb_list a, #breadcrumb_list li:before, #breadcrumb_list li{
    color:var(--watch-body-color);
}


@media (prefers-color-scheme: dark) {
    
    #back-top span {
        background: var(--watch-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
        background-size: 25px;
    }
    .light-mode #back-top span {
        background:var(--watch-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
        background-size: 33px;
    }
    .model_list_item_image_vertical img,#store ul li .image img{
        border-radius: 5px;
    }
    .light-mode .arrow-right, .arrow-left , .light-mode .top-views .icon-user, .light-mode .sortFilter img{
        filter: invert(0);
    }
    .light-mode .sortFilter button:focus img, .light-mode .sortFilter button:hover img{
        filter:none;
    }
    .breakingNews ul li font i {
        filter: invert(0.6);
    }

    
    .light-mode #brand_model{
        background: #fff url(https://www.siamphone.com/images/magnifying2.png) no-repeat 2px 4px;
        background-size: 35px;
    }
    #brand_model{
        background: #292929 url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 13px;
        background-size: 20px;
    }
}