@import url('https://fonts.googleapis.com/css2?family=Lato');
.container{
   width: 80%;
   margin: auto;
   color: #212121;
   font-family: "Lato Regular", sans-serif;
   font-size: small;
   line-height: 35px;
   height: 100%;
}
#left-container{
   width:15%;
   position: fixed;
   z-index: 1;
   background-color: #F6F6F6;
 
}
#right-container{
   width: 80%;
   margin-left: 20%;
   display: flex;
   gap: 20px;
   margin-top: 20px;
}
#left-container li{
   list-style-type: none;
   padding-left: 10px;
 
}
#bottom-list{
   height: 280px;
   overflow: scroll;
    
}
.list.active{
  background-color: #F2E6D9;
  border-left: #FF8A00 3px solid ;
  font-weight: bold;
 }

 #rleft{
    width: 70%;  
    display: flex;
    flex-direction: column;
    gap: 10px;    
 }
 #rleft>div{
   background-color: white;
   
 }
 #rright{
    width: 30%;
    background-color: white;
   
 }
 #rright>div{
   background-color: white;
 }
 #top-news{
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    margin: 0;
 }
 #headlinebottom{
    display: flex;
    justify-content: space-between;
 }
 #bot-news{
    height: 150px;
   padding-left: 10px;
   padding-right: 10px;
   display: flex;
   flex-direction: row;

 }
 #left-container li:hover{
      cursor: pointer;
      color: #807f7f;
 }
#headlineshare i{
padding-left: 10px;
}
#headlineimg{
width: 100%;
}
#publisheddate{

margin: 0;
}
#headlinebottom{
margin: 0;
padding: 0;
}
#recommended {
padding: 0px 10px;
display: flex;
justify-content: space-between;
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid grey;
}
#recommended i{
color: orange;
}


/* popup Style */
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:999;
display:none;
}

.popup #content {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:95%;
max-width:480px;
height:306px;
z-index:999;
text-align:center;
padding:20px;
box-sizing:border-box;
border-radius: 3px;
padding: 45px;
}

.popup .close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:50px;
height:50px;
color:black;
font-size:35px;
font-weight:200;
line-height:30px;
text-align:center;
}

.popup.active .overlay {
display:block;
}

.popup.active #content {
transition:all 600ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}

#showPopup   {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:15px;
font-size:16px;
border:2px solid #222;
color:#222;
font-weight:600;
background:#fff;
cursor: pointer;
}
#continueBtn{
border-radius: 25px;
 background: #F99D1C;
 color: #FFFFFF;
 width: 130px;
 height: 38px;
 border: none;
 font-size: 16px;
 cursor: pointer;
 margin-top: 50px;
}
#popuptext{
margin-bottom: 19px;
}
#popuptextp{
margin: 2px;
padding: 3px;
font-size: 18px;
}

/* account section */
#account_id{
margin-top: 0px;
          position:  fixed;
          background-color: white;
          right: 5px;
          top: -20px;
          text-align: center;
          width: 25%;
          height: 1800px;
          padding: 20px 0px;
          display: none;
          z-index: 1;
 }

#signInProfile{
          background-color: #f7941e;
          color: white;
          text-align: center;
          padding: 40px;
}
#signInProfile .edit{
         border: 2px solid white;
         border-radius: 20px;
         padding: 10px;
         cursor: pointer;
}
#signInSub{
text-align: center;
width: 60%;
margin: auto;
}
#signInSub>p{
border: 1px solid black;
border-radius: 20px;
padding: 10px 0px;
cursor:  pointer;
}
#firstLetter{
width: 20%;
margin: auto;
margin-top: 20px;
background-color: white;
border-radius: 50%;
color:#f7941e ;
}
#closeAccoutnPro{
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
#logOut{
cursor: pointer;
}
a{
 text-decoration: none;
}
#account_id ul{
   position: absolute;
   /* left: -10Spx; */
   margin-top: 0%;
   background: #ffffff;
   width: 100%;
}
#account_id li{
   /* border: 2px solid blue; */
   position: relative;
   left: -40px;
   width: 100%;
   margin-right: 0px;
   display: flex;
   
}

#account_id>ul{
   list-style: none;
   /* text-align: left; */
}
#account_id>ul>li{
   padding: 10px 30px;
   border-top: 1px solid silver;
   border-width: 100%;
   cursor: pointer;
}
#signInData:hover{
   color: gray;
}