*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}
body{
    /* background-color: rgb(49, 48, 48); */
}



                                    /* theme or colors */

/* These eight classes are the old hand-rolled light/dark switch, from before the
   token system existed. `body` on temp.html still carries .light_bg_content, so
   the literal `white` here was painting the page background white underneath a
   dark theme whose --ink is near-white — which is why every heading on the
   legacy pages (/TipsandTrick, /question, /all-stock, /login) went
   light-on-light. Both halves now point at the same surface tokens: whichever
   class the old switcher lands on, the page follows the real theme and the text
   on it stays readable. */

                                    /* light */

.light_bg_header{
    background: var(--surface-2);
}
.light_bg_content{
    background-color: var(--surface);
}
.light_bg_color{
    color: var(--ink);
}
                                    /* dark  */

.dark_bg_header{
    background: var(--header);
}
.dark_bg_content{
    background-color: var(--surface-2);
}
.dark_bg_color{
    color: var(--ink);
}
.dark_slide_bg{
    background-color: var(--surface-2);
}
.dark_lightgray{
    color: var(--ink-2);
}

                                /* side nav bar */

.nav_logo{
    font-size: 30px;
    float: left;
    padding: 7%;
    cursor: pointer;
}
.side_bar{
    /* border: 2px solid red; */
    width: 40%;
    height: 100%;
    overflow:auto;
    position: fixed;
    z-index: 2;
    margin-left: -50%;
    transition: 1s;
    /* background: white; */
}
/* The legacy drawer's panel, shared by all 33 templates that extend temp.html.
   It was a hard `white`, and most of what sits on it is self-grounded (every
   .setting_nav carries its own dark inline background, .sum_category is
   darkslategray, the language select is brown) — so those stay as they are, they
   are readable on either surface and the colours read as deliberate. What was
   NOT safe is the text that has no ground of its own: .logout's link was a
   literal black and .ctg_link a literal brown, both of which only work because
   the panel was pinned light. Panel and inks are theme roles together now, so
   the pairing holds whichever way the theme goes. */
.others_sidebar{
    /* border: 2px solid green; */
    background-color: var(--surface);
    width: 95%;
}
.exit_side_bar{
    /* border: 2px solid blue; */
    font-size: 25px;
    padding: 5px;
    text-align: right;
    position: absolute;
    width: 100%;
}
.user_pic{
    /* border: 2px solid purple; */
    text-align: center;
    /* width: 60%;
    margin-left: 15%; */
    margin-top: 10px;
    width: 100%;
    text-align: center;
}
.profile_pic{
    height: 200px;
    width: 200px;
    display: inline-block;
    box-shadow: 1px 1px 7px black;
}
.user_pic img{
    height: 100%;
    width: 100%;
}
.logout{
    /* border: 2px solid red; */
    text-align: center;
    padding: 10px;
}
.logout a{
    /* Black ink and a black outline on what is now a theme surface: 1.3:1 in the
       dark theme, and the outline gone with it. --ink is 17.2:1 light / 13.8:1
       dark on --surface, and --line is the hairline role that stays visible on
       both. */
    border: 2px solid var(--line);
    width: 80%;
    display: inline-block;
    font-size: 20px;
    border-radius: 10px;
    color: var(--ink);
    padding: 7px;
}
.category{
    /* border: 2px solid purple; */
    /* height: 70px; */
}
.dtls_category{
    /* border: 2px solid red; */
    /* height: 200px; */
    text-align: center;
}
.sum_category{
    margin-top: 7px;
    background: darkslategray;
    color: white;
    /* border: 2px solid green; */
    font-size: 16px;
    /* text-decoration: none; */
    text-align: left;
    margin-bottom: 7px;
    box-shadow: 3px 3px 7px black;
    width: 80%;
    margin-left: 5%;
    cursor: pointer;
    padding: 4px;
}
.ctg_link{
    margin-right: 1%;
    /* border: 2px solid yellow; */
    font-size: 16px;
    display: inline-block;
    text-align: center;
    width: 40%;
    margin-bottom: 7px;
    box-shadow: 2px 2px 6px black;
    /* `brown` (#a52a2a) is the pre-rebrand red, and it was 7.1:1 only because the
       panel was pinned white — on the dark surface it is 2.3:1. --primary is the
       branded equivalent and is measured against --surface in both themes:
       5.3:1 light, 4.5:1 dark at this 16px. */
    color: var(--primary-strong);
}
.ctg_link img{
    height: 1.9vw;
    width: 1.9vw;
}
.lang_sum{
    margin-left: 5%;
    display: inline-block;
    margin-bottom: 7px;
}
.lang_sum select{
    width: 100%;
    font-size: 16px;
    color: white;
    background: brown;
    border: none;
    box-shadow: 2px 2px 6px black;
}
.theme_sum{
    margin-left: 5%;
}
.theme_sum .round{
    box-shadow: 2px 2px 6px black;
}
.setting_nav{
    margin-top: 7px;
    background:rgb(131, 43, 43);;
    color: white;
    font-size: 16px;
    text-align: left;
    margin-bottom: 1px;
    box-shadow: 3px 3px 7px black;
    width: 80%;
    margin-left: 5%;
    cursor: pointer;
    padding: 4px;
}

                                /* wrapper  (header)  */ 

.wrapper{
    /* border: 2px solid red; */
    /* background-color: black; */
}
.header{
    /* background: rgb(211, 211, 211); */
    /* background: black; */
    position: fixed;
    width: 100%;
    box-shadow: 1px 1px 8px black;
    z-index: 1;
}
.nav_main{
    /* border: 4px solid purple; */
    width: 100%;
}
.nav_li{
    /* border: 2px solid blue; */
    display: inline-block;
    vertical-align: top;
}
.nav_doggle li{
    /* border: 2px solid yellow; */
    display: inline-block;

}
.logo{
    /* border: 2px solid red; */
    width: 20%;
    /* font-size: 40px; */
    text-align: center;
}
.logo img{
    /* border: 2px solid blue; */
    width: 80px;
    height: 50px;
    /* The logo is a square lockup; this box is 8:5. Without object-fit the
       browser stretches it to fill and the horse comes out squashed. */
    object-fit: contain;
    vertical-align: middle;
    /* text-shadow: 4px 4px 9px black; */
}


                                    /* search  */

.search{
    width: 30%;
    text-align: center;
    height: 80px;
    padding-top: 20px;
    /* padding-bottom: 30px; */
}
.search_bar{
    display: inline-block;
    width: 80%;
    height: 40px;
    box-shadow: 1px 1px 4px black;
    /* text-align: right; */
    /* margin-bottom: 20px; */
}
.search_bar:hover{
    border-color: rgb(158, 158, 238);
    box-shadow: 2px 2px 4px rgb(158, 158, 238);
}
.search_txt{
    /* border: 3px solid blue; */
    border: none;
    background: none;
    width: 80%;
    height: 100%;
    font-size: 20px;
    float: left;
    padding-left: 10px;
    cursor: pointer;
    padding-top: 5px;
}
.searchbtn{
    /* border: 3px solid red; */
    border: none;
    background: none;
    width: 10%;
    height: 100%;
    font-size: 20px;
    float: right;
    cursor: pointer;
    margin-right: 10px;
    padding-top: 5px;
}




                            /* location bar  */

.location{
    /* border: 2px solid red; */
    width: 25%;
    text-align: center;
    height: 80px;
    padding-top: 28px;
}
.loaction_bar{
    display: inline-block;
    width: 80%;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
}
.location_txt{
    background: none;
    height: 100%;
    width: 80%;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    color: var(--ink-3);
    float: left;
    padding-left: 2px;
    border: none;
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}
.loc_logo{
    /* border: 1px solid black; */
    width: 10%;
    height: 100%;
    font-size: 20px;
    float: left;
    padding-top: 5px;
    cursor: pointer;
    /* display: none; */
}
#loc_change{
    border: 1px solid black;
    width: 10%;
    height: 100%;
    font-size: 20px;
    float: right;
    padding-top: 5px;
    cursor: pointer;
    border: none;
    margin-right: 10px;
    background: none;
    display: none;
}
.loc_current{
    background: none;
    position: absolute;
    height: 30px;
    margin-left: 3%;
    top: 0;
    background-color: white;
    cursor: pointer;
    box-shadow: 1px 1px 4px black;
    width: 130px;
    visibility: hidden;
}

                                    /* others profile,setting */

.others{
    /* border: 2px solid purple; */
    width: 21%;
}
.nav_doggle li{
    /* border: 2px solid brown; */
    vertical-align: top;

}
#addpost{
    width: 40%;
    text-align: center;
    height: 80px;
    padding-top: 14px;
    font-size: 20px;
}
#add_postbtn{
    display: inline-block;
    height: 50px;
    width: 90%;
    padding-top: 10px;
    border-radius: 20px;
    cursor: pointer;
    border-top-color: teal;
    border-bottom-color: purple;
    box-shadow: 1px 1px 4px black;
}
#add_postbtn:hover{
    border-color: rgb(158, 158, 238);
    box-shadow: 2px 2px 4px rgb(158, 158, 238);
}
#user_profile{
    /* border: 2px solid green; */
    width: 30%;
    text-align: center;
    padding-top: 14px;
    font-size: 40px;
    cursor: pointer;
}
#user_setting{
    /* border: 2px solid purple; */
    width: 20%;
    text-align: center;
    padding-top: 30px;
    font-size: 22px;
    cursor: pointer;
}

                            /* login signup popup */

.login_popup{
    background-color: rgb(0, 0, 0,0.7);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    visibility: hidden;
}
/* The legacy login/signup popup. `lightgray` (#d3d3d3) is a fixed light panel,
   and two of the things painted on it are theme roles that flip: .exit_login's
   --ink-3 landed at 1.75:1 in the dark theme and .mob_title — the 23px "Mobile
   Number" / "Password" heading — inherits --ink and came out at 1.27:1, i.e. not
   there at all. Everything else in this popup is self-grounded (black fills with
   white text), so the panel was the whole bug: as --surface it pairs with --ink
   at 17.2:1 light / 13.8:1 dark and with --ink-3 at 4.7:1 / 6.2:1, which is what
   those two roles are measured for. */
.login_cont{
    background: var(--surface);
    height: 90%;
    width: 40%;
    margin-left: 30%;
    margin-top: 2.5%;
    border-radius: 4px;
}
.exit_login{
    /* border: 2px solid red; */
    padding: 4px 20px;
    /* text-align: right; */
    font-size: 30px;
    color: var(--ink-3);
    height: 30px;
}
#back_popup{
    /* border: 1px solid brown; */
    float: left;
    cursor: pointer;
}
#exit_popup{
    /* border: 1px solid brown; */
    float: right;
    cursor: pointer;
}
.login_logo{
    /* border: 2px solid black; */
    height: 200px;
    text-align: center;
}
.log_logo{
    /* border: 2px solid purple; */
    display: block;
    width: 80%;
    margin-left: 10%;
}
.login_logo img{
    /* border: 2px solid red; */
    width: 240px;
    height: 200px;
    text-align: center;
}
.popup_ul li{
    /* border: 2px solid black; */
    text-decoration: none;
    display: block;
    width: 80%;
    margin-left: 10%;
    vertical-align: top;
}
/* The five CTAs. The black fill and white ink stay — 21:1, and a black
   "Continue with…" row reads as deliberate rather than as a theming miss. Only
   the outline changed: `2px solid black` around a black fill was invisible on
   the light panel and now merges into the dark one too, so the control had no
   edge in either theme. --line is the hairline role and shows on both. */
.mob_pass,.mob_otp,.fb_login,.gm_login,.signup{
    border: 2px solid var(--line);
    margin-top: 5%;
    height: 40px;
    border-radius: 7px;
    padding-left: 4%;
    font-size: 23px;
    padding-top: 5px;
    cursor: pointer;
    background-color: black;
    color: white;
}
.mob_title{
    /* border: 2px solid brown; */
    height: 10%;
    font-size: 23px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top;
    display: block;
    margin-top: 1%;
}
/* Four black input wells (login phone/password, signup phone/password). Fill and
   white ink stay; the outline follows .mob_pass above — an input whose border is
   the same black as its own fill has no visible edge on either surface. */
#phone_no{
    border: 2px solid var(--line);
    height: 35px;
    vertical-align: top;
    border-radius: 6px;
    background-color: black;
}
#phone_no span{
    /* border: 1px solid black; */
    display: inline-block;
    width: 10%;
    height: 100%;
    padding-left: 1%;
    font-size: 20px;
    color: var(--ink-3);
    font-weight: bold;
}
#phone_no input{
    border: none;
    height: 100%;
    width: 80%;
    font-size: 20px;
    background: none;
    color: white;
    padding-left: 7px;
}
.password{
    border: 2px solid var(--line);   /* see #phone_no */
    height: 35px;
    vertical-align: top;
    margin-top: 2%;
    border-radius: 6px;
    background-color: black;
}
.password input{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 20px;
    padding-left: 2%;
    background: none;
    color: white;
}
#log_btn{
    /* border: 2px solid black; */
    height: 35px;
    vertical-align: top;
    margin-top: 3%;
    width: 50%;
    margin-left: 25%;
}
#log_btn button{
    height: 100%;
    width: 100%;
    font-size: 20px;
    border: none;
    /* `white` on `gray` (#808080) is 3.95:1, and at 20px regular weight this is
       normal-size text, so it needed 4.5 and never had it — in either theme, since
       both halves were fixed. The submit button of a login form is a poor place to
       be under AA. --primary/--primary-ink is the site's button pairing and both
       halves flip together: 5.1-5.8:1 light and 4.5-6.4:1 dark across all nine
       palettes (the floor is brown's 4.54, which is why the pair is safe here at
       normal size). Same change in #signup_btn button below. */
    background: var(--primary);
    color: var(--primary-ink);
    cursor: pointer;
}

#s_phone_no{
    border: 2px solid var(--line);   /* see #phone_no */
    height: 35px;
    vertical-align: top;
    border-radius: 6px;
    background-color: black;
}
#s_phone_no span{
    /* border: 1px solid black; */
    display: inline-block;
    width: 10%;
    height: 100%;
    padding-left: 1%;
    font-size: 20px;
    color: var(--ink-3);
    font-weight: bold;
}
#s_phone_no input{
    border: none;
    height: 100%;
    width: 80%;
    font-size: 20px;
    background: none;
    color: white;
    padding-left: 7px;
}
.s_password{
    border: 2px solid var(--line);   /* see #phone_no */
    height: 35px;
    vertical-align: top;
    margin-top: 2%;
    border-radius: 6px;
    background-color: black;
}
.s_password input{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 20px;
    padding-left: 2%;
    background: none;
    color: white;
}
#signup_btn{
    /* border: 2px solid green; */
    height: 35px;
    vertical-align: top;
    margin-top: 3%;
    width: 50%;
    margin-left: 25%;
    /* color: teal; */
}
#signup_btn button{
    height: 100%;
    width: 100%;
    font-size: 20px;
    border: none;
    background: var(--primary);       /* see #log_btn button */
    color: var(--primary-ink);
    cursor: pointer;
}


                                    /* setting popup  */


.setting_popup{
    position: absolute;
    margin-left: -8%;
    visibility: hidden;
    display: block;
}
.setting_popup li{
    display: block;
    padding-top: 4px;
}


                                /* theme   */

.switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 34px;
    /* border: 1px solid red; */
  }
  
  .switch input {display:none;}
  
  .slider_theme {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
     border-radius: 34px;
     border: 1px solid gray;
  }
  
  .slider_theme:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: lightgray;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider_theme {
    background-color: black;
  }
  
  input:focus + .slider_theme {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider_theme:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
  }
  
  /*------ ADDED CSS ---------*/
  .slider_theme:after
  {
   content:'Light';
   color: var(--ink-3);
   display: block;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
   font-size: 10px;
   font-family: Verdana, sans-serif;
  }
  
  input:checked + .slider_theme:after
  {  
    content:'Dark';
  }
  
  /*--------- END --------*/



                                    /* genral  */

.stylish_border{
    border-top: 1px solid black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 1px solid black;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.stylish_border:hover{
    border-color: rgb(158, 158, 238);
    box-shadow: 2px 2px 4px rgb(158, 158, 238);
}
.nav_cover{
    height: 90px;
}
.signup_co_change{
    background-color: teal;
}



@media only screen and (max-width: 1000px) {
    #addpost{
        padding-top: 20px;
        font-size: 15px;
    }
    #add_postbtn{
        height: 40px;
    }
    #user_profile{
        padding-top: 18px;
        font-size: 30px;
    }
    #user_setting{
        padding-top: 30px;
        font-size: 16px;
    }
    .search_bar{
        height: 30px;
    }
    .loaction_bar{
        height: 30px;
    }
    #loc_logo{
        padding-top: 6px;
    }
    #loc_change{
        padding-top: 0px;
    }
    .search_txt{
        font-size: 17px;
    }
    .location_txt{
        padding-top: 5px;
    }
    .login_cont{
        height: 100%;
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        border-radius: 0px;
    }
    
}
@media only screen and (max-width: 750px) {
    .location_txt{
        font-size: 13px;
    }
    .loc_logo{
        font-size: 14px;
        padding-top: 12px;
    }
    #loc_change{
        font-size: 14px;
    }
    #addpost{
        display: none;
    }
    .location{
        width: 26%;
    }
    .loc_current{
        height: 25px;
        width: 115px;
    }
    .logo img{
        width: 65px;
        height: 45px;
    } 
    .side_bar{
        width: 80%;
        height: 100%;
        overflow:auto;
        margin-left: -90%;
    }
}
@media only screen and (max-width: 550px) {
    .others{
        display: none;
    }
    .logo{
        /* border: 2px solid green; */
        width: 29.5%;
    }
    .logo img{
        /* border: 2px solid blue; */
        width: 67px;
        height: 50px;
        vertical-align: middle;
    }
    .search{
        /* border: 2px solid purple; */
        width: 68%;
        text-align: center;
        height: 80px;
        padding-top: 20px;
    }
    .search_bar{
        width: 90%;
        font-size: 14px;
    }
    .location{
        /* border: 2px solid red; */
        width: 95%;
        height: 25px;
        text-align: right;
        padding: 0;
    }
    .loaction_bar{
        /* border: 2px solid green; */
        width: 60%;
        height: 20px;
    }
    .location_txt{
        height: 100%;
        width: 80%;
        font-size: 13px;
        padding-top: 1px;
    }
    .loc_logo{
        width: 10%;
        height: 100%;
        font-size: 14px;
        display: inline-block;
        margin-top: -8px;
    }
    #loc_change{
        width: 10%;
        height: 100%;
        font-size: 14px;
        padding: 0;
    }
    .loc_current{
        height: 20px;
        margin-left: -95%;
        top: 79%;
        width: 115px;
    }
    .nav_cover{
        height: 110px;
    }
    .nav_logo{
        font-size: 27px;
    }
}

@media only screen and (max-width: 400px) {
    .loc_current{
        /* border: 1px solid red; */
        height: 20px;
        margin-left: -95%;
        top: 13%;
        width: 110px;
        position: fixed;
        font-size: 11px;
    }
    .logo{
        /* border: 2px solid green; */
        width: 29%;
        text-align: right;
    }
    .logo img{
        /* border: 2px solid purple; */
        width: 50px;
        height: 40px;
    }
    .nav_logo{
        font-size: 22px;
    }
    .profile_pic{
        height: 170px;
        width: 170px;
    }
    .mob_pass,.mob_otp,.fb_login,.gm_login,.signup{
        font-size: 17px;
    }

}

@media only screen and (max-width: 350px) {
    .logo{
        /* border: 2px solid green; */
        width: 30%;
        text-align: right;
    }
    .logo img{
        width: 55px;
        height: 35px;
    }
    .nav_logo{
        font-size: 20px;
    }
    .loc_current{
        margin-left: -0%;
        top: 13%;
    }

}