/* default, light mode styles set with variables */
:root {
    --wrapper-search-bg:#f9f9f9;
    --wrapper-search:#ffffff;
    --wrapper-search-border:#f2f2f2;
    --wrapper-search-input:#ffffff;
    --wrapper-search-placeholder:#000000;

    --spec-body-bg:#ffffff;
    --spec-body-color:#222222;
    --spec-backtop-bg:#cfcfcf;
    --spec-blackwhite-color:#000000;
    --spec-whiteblack-color:#ffffff;
    --spec-h1-bg:linear-gradient(-45deg, #f4f4f4, #fafafa, #ffffff, #eeeff2);
    --spec-breadcrumb-bg:#ffffff;
    --spec-breadcrumb-border:rgba(237,237,237,1);
    --spec-breadcrumb-color:#222222;
    --spec-headertopic-bg:#f8f8f8;
    --spec-headertopic-color:#222222;
    --spec-function-border:#000000;
    --spec-subhead-bg:#ffffff;
    --spec-subhead-color:#090909;
    --spec-subhead-before:#e5e5e5;
    --spec-blockthree-hover:#f1f1f1;
    --spec-oneblock-border:#dddddd;
    --spec-sellphone-bg:#f5f5f5;
    --spec-modal-bg:#ffffff;
    --spec-datetopic-bg:#ffffff;
    --spec-datetopic-color:#3a3a3a;
    --spec-screensize-bg:#353535;
}
/*dark-mode styles*/
.dark-mode {
    --wrapper-search-bg:#333333;
    --wrapper-search:#4a4a4a;
    --wrapper-search-border:#323232;
    --wrapper-search-input:#4a4a4a;
    --wrapper-search-placeholder:#ffffffa6;

    --spec-body-bg:#222222;
    --spec-body-color:#dddddd;
    --spec-backtop-bg:#353535;
    --spec-blackwhite-color:#ffffff;
    --spec-whiteblack-color:#000000;
    --spec-h1-bg:linear-gradient(-45deg, #242424, #2a2a2a, #222222, #646464);
    --spec-breadcrumb-bg:#222222;
    --spec-breadcrumb-border:rgb(70, 70, 70);
    --spec-breadcrumb-color:rgba(255, 255, 255, 0.65);
    --spec-headertopic-bg:#191919;
    --spec-headertopic-color:#ffffff;
    --spec-function-border:#878787;
    --spec-subhead-bg:#222222;
    --spec-subhead-color:#ffffff;
    --spec-subhead-before:#505050;
    --spec-blockthree-hover:#1c1c1c;
    --spec-oneblock-border:#666666;
    --spec-sellphone-bg:transparent;
    --spec-modal-bg:#565656;
    --spec-datetopic-bg:#191919;
    --spec-datetopic-color:#dddddd;
    --spec-screensize-bg:#4a4a4a;
}


/* header for specification */
.mode-switch{
    display:block;
    margin-top: 6px;
}
.mean-container .mode-switch{
    left:0;
}
/*
.mode-switch .switch{
    width:26px;
}
.mode-switch .slider:before{
    background-color: transparent;
    box-shadow: none;
}
.mode-switch input:checked + .slider:before{
    transform: translateX(2px);
    background-color: transparent;
}
.mode-switch .slider-icon {
    right: 2.1px;
    top: 2px;
}
.mean-container .mode-switch{
    left:0;
    top:7px;
}
.mean-container .mode-switch .slider {
    border: 1px solid #808080;
}
.mean-container .mode-switch .slider:before, .mean-container .mode-switch input:checked + .slider:before{
    background-color: transparent;
}
.mean-container .mode-switch .slider-icon {
    right: 2px;
    top: 2px;
}
@media (max-width: 991px) {
    .header-wrapper .cover_lang{
        left: 2rem;
        top: 4px !important;
    }
}
*/

/* start wrapper search */
.search-home2{
    background:var(--wrapper-search-bg);
}
#wrapper-search input[type="text"]{
    background-color:var(--wrapper-search);
    border-color:var(--wrapper-search-border);
}
#wrapper-search input[type="text"]::placeholder{
  color:var(--wrapper-search-placeholder);
}
#wrapper-search .tab-content{
    background-color: transparent;
}
.dark-mode #wrapper-search input[type="text"]{
    background-image: url(//www.siamphone.com/images/magnifying.png) ;
    background-size: 18px;
    background-position: 10px 17px;
    background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
    #wrapper-search input[type="text"]{
        background-image: url(//www.siamphone.com/images/magnifying.png) ;
        background-size: 18px;
        background-position: 10px 17px;
        background-repeat: no-repeat;
    }
    .light-mode #wrapper-search input[type="text"]{
        background-image: url(//www.siamphone.com/images/magnifying-glass.svg);
        background-size: 20px;
        background-position: 10px 15px;
        background-repeat: no-repeat;
    }
}
/* end wrapper search */

body , #wrapper{
    background: var(--spec-body-bg);
    color: var(--spec-body-color);
}
body.dark-mode{background-color:#222222;}
h1{
    background: var(--spec-h1-bg);
    background-size: 400% 400%;
}
h1 a{
    color:var(--spec-blackwhite-color);
}

#breadcrumb_cover{
    background: var(--spec-breadcrumb);
}
#breadcrumb_list{
    text-shadow:none;
    background: var(--spec-breadcrumb-bg);
    border: 1px solid var(--spec-breadcrumb-border);
}
#breadcrumb_list li:before, #breadcrumb_list ul li a{
    color:var(--spec-body-color);
}
#wrapper-gallery {
    background: #fff;
    border-radius: 13px;
}
.dark-mode .brandLogo img {
    padding: 0 15px;
    border-radius: 10px;
    background: #fff;
}
.function{
    color:var(--spec-blackwhite-color);
}
.dark-mode .function em.icon {
    filter: brightness(1) invert(1);
}
h2.header_topic{
    background:var(--spec-headertopic-bg);
    color:var(--spec-headertopic-color);
}
.function .block-function:before{
    border-color:var(--spec-function-border);
}
.dark-mode ul.nav_blue li {
    background: url(//www.siamphone.com/images/fullstop_wh.png) 0 12px no-repeat;
    background-size: 8px;
}
#spec_container a{
    color:var(--spec-blackwhite-color);
}
.detail_source a{
    color:var(--spec-body-color);
}
.header_widget_news .subHeader, .phone-relate h3 ,.phone-relate h3 span, .header-widget h2, .header-widget-left h2{
    background:var(--spec-subhead-bg);
    color:var(--spec-subhead-color);
}
.cover_widget_news a{
    color:var(--spec-subhead-color);
}
.header_widget_news:before, .phone-relate h3:after, .header-widget:before, .header-widget-left:before{
    background:var(--spec-subhead-before);
}
.block_forth_list .header-widget h2 a{
    color:var(--spec-blackwhite-color);
}
.blockVideoName a, .oneblock .second ul li a ,.review a{
    color:var(--spec-body-color);
}
.to_buy_price strong{
    color:var(--spec-blackwhite-color);
}
.dark-mode .price_normal .infor {
    background-image: url(//www.siamphone.com/images/icon-information-wh.png);
}
.dark-mode #online_store .shop {
    box-shadow: none;
    background: #ffffff;
    border-radius: 8px;
    border-bottom: 0;
    margin: 15px auto 0;
}
.dark-mode .btn-shop {
    background: linear-gradient(to bottom, #4ba0f7 0%,#2a84e1 100%);
    color: #fff !important;
    border: 1px solid #2f88e4;
}
.block-three ul li .name a{
    color:var(--spec-body-color);
}
.block-three ul li:hover {
    background: var(--spec-blockthree-hover);
}
.shared .count span, .shared .viewBadges span ,.preliminary button{
    color:var(--spec-blackwhite-color);
}
.shared .count font, .shared .viewBadges font{
    color:var(--spec-body-color);
}
.dark-mode .model_list_item_image_vertical img, #mar_img img{
    border-radius: 5px;
}
.cover_widget_news a, .TopBox ul li:first-child p.readLink a, .TopBox ul li p.readLink a, .caution a, #inner_name a{
    color:var(--spec-body-color);
}
.oneblock .second ul li{
    border-color:var(--spec-oneblock-border);
}
.block-three ul li .number{
    background: var(--spec-blackwhite-color);
    color:var(--spec-whiteblack-color);
}
.dark-mode .header_widget_news .subHeader img {
    filter: brightness(1) invert(1);
}
.modal-content{
    background: var(--spec-modal-bg);
}
.close{
    color:var(--spec-blackwhite-color);
}
.dark-mode .close {
    font-size: 2rem;
    font-weight: 400;
    opacity: 0.8;
}
.block_fourth ul li a{
    color:var(--spec-body-color);
}
.header_widget_news span{
    background: var(--spec-datetopic-bg);
    color: var(--spec-datetopic-color);
}
.model_list_item .model_list_item_badge .screen_size{
    background:var(--spec-screensize-bg);
}
.sellphone-bar p{
    color:var(--spec-blackwhite-color);
}

#back-top span {
    background: var(--spec-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
    background-size: 25px;
}
.dark-mode #back-top span {
    background: var(--spec-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
    background-size: 25px;
}
@media (prefers-color-scheme: dark) {
    #back-top span {
        background: var(--spec-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(--spec-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
        background-size: 33px;
    }
}


@media (max-width: 991px) {
	.function .block-function:nth-child(4):before{
        border-bottom:1px solid var(--spec-function-border);
        border-left:1px solid var(--spec-function-border);
    }
    .sellphone-bar .sellDetail{
        background:var(--spec-sellphone-bg);
    }
}
@media (max-width: 768px) {
	.function .block-function:nth-child(4):before{
        border-bottom:1px solid var(--spec-function-border);
        border-left:1px solid var(--spec-function-border);
    }
}