﻿
#main_div
{ 
   width:960px; position:relative; /*background-color:red;*/
}



/****************************/
#div_newMembers
{
    position:absolute; right:10px; top:35px; width:250px;
}

#div_newMembers img
{
  width:250px; border:none;
}



/* android App */
#div_androidApp
{
    position:absolute; right:10px; top:102px; width:250px; height:48px; text-align:right; padding-top:5px; padding-bottom:5px; cursor:pointer; display:none;
}

#div_androidApp div
{
   width:202px; height:48px; float:left; text-align:center; font-size:16px; font-weight:bold; line-height:48px; color:White; /*background-color:Aqua;*/
}

#div_androidApp img
{
   width:36px; float:left; margin-top:6px; margin-left:10px;
}




#div_myBestPicture
{
    width: 250px;
    height: 58px;
    line-height: 38px;
    position: absolute;
    text-align: right;
    padding:10px;
    padding-right:14px;
    box-sizing:border-box;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    background-image:url(../Images/camera.png);
    background-size:30px;
    background-repeat:no-repeat;
    background-position:20px 12px;
    color: White;
    background-color:black;
}





/* mobile site */
#div_mobileSite
{
    width:250px; height:48px; line-height:48px; position:absolute; right:10px; top:170px; text-align:center; padding-top:5px; padding-bottom:5px; cursor:pointer;
    font-size:16px; font-weight:bold; color:White; display:none;
}



#div_purchase
{
    position:absolute; left:95px; top:170px; width:250px; height:60px; line-height:60px; font-size:30px; text-align:center;
    color:White; cursor:pointer; display:none;
}


#div_explain
{
    position:absolute; left:270px; top:20px; width:390px;  text-align:right; 
    font-size:15px; font-family:site_font; letter-spacing:0px; line-height:22px; padding:5px 5px 5px 5px; color:black; direction:rtl;
    /*background-color:Lime;*/
}








#div_hello
{
    font-size: 22px;
    color: var(--color-primary);
    direction: rtl;
    text-align: right;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}



.layout-container
{
	display:grid;
	grid-template-columns:250px 1fr;
	column-gap:100px;
}



/*********************************************************************************************/
.buttons
{
	/*background-color: aquamarine;*/
}

#btnSearchFriend
{
	width: 100%;
	height: 60px;
	padding: 20px 30px;
	border: none;
	border-radius: 10px;
	font-size: 20px;
	cursor: pointer;
	color: var(--color-surface);
	background-color: var(--color-primary);
}
/*********************************************************************************************/




/* ------- user details ----------  */
#div_userDetails
{
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    box-sizing: border-box;
	padding:30px;
	display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
}

#div_userDetails h3
{
	margin:0;
}

.stat-row
{
    flex: 1;
    display: flex;
    flex-direction: row;
	justify-content:flex-end;
	align-items:center;
    gap: 10px;
    background: #f7f8fa;
    border-radius: 10px;
    padding: 14px 16px;
}


.stat-row span:first-child
{
	margin-right:auto;
}

.stat-row span
{
	direction:rtl;
}

.stat-row img
{

}
/* ------- user details ----------  */























/* ------- login box ----------  */

#div_login
{
    position:absolute; left:10px; top:30px; width:248px; height:280px; background-color:#fff; border:1px solid #D7D7D7; 
}

#container
{
    position:relative; width:100%; height:100%;
}

#Div_title
{
    position:absolute; top:5px; width:100%; left:0px; text-align:center; font-size:18px; font-weight:bold; /* background-color:Aqua; */
}


#txtEmail
{
     position:absolute; top:35px; left:18px; width:190px; height:40px; border:1px solid #D7D7D7; padding-left:10px;
     padding-right:10px; color:Black; font-size:14px; font-family:site_font; letter-spacing:1px; border-radius:2px;
}


#txtPassword
{
     position:absolute; top:90px; left:18px; width:190px; height:40px; border:1px solid #D7D7D7; padding-left:10px;
     padding-right:10px; color:Black; font-size:14px; font-family:site_font; letter-spacing:1px; border-radius:2px;
}

#loginButton
{
    position:absolute; top:170px; left:18px;
}

#forgotPassword
{
    position:absolute; top:250px; right:18px;
}

#div_rememberMe
{
    position:absolute; top:220px; right:18px;
}

#div_error
{
    position:absolute; top:140px; right:0px; direction:rtl; width:100%; text-align:center;  
}

/* place holder dirction */
input[type="text"]:-moz-placeholder {text-align: right;}
input[type="text"]:-ms-input-placeholder {text-align: right;}
input[type="text"]::-webkit-input-placeholder {text-align: right;}
input[type="password"]:-moz-placeholder {text-align: right;}
input[type="password"]:-ms-input-placeholder {text-align: right;}
input[type="password"]::-webkit-input-placeholder {text-align: right;}

/************************************************************/




.link_forgetPass:link
{  
    color:black; text-decoration:underline;
}

.link_forgetPass:visited
{
    color:black; text-decoration:underline;
}


.movLink
{
    text-decoration:underline; color:var(--color-primary); font-weight:bold; cursor:pointer;
}
