/*********************** Header table ***************************/
#tbl_header
{
   width:90%; margin:10px 0 10px 5%; font-size:16px; /*background-color:blueviolet;*/
}

#tbl_header td:nth-child(1)
{
    width:50%; height:30px; /*background-color:aqua;*/
}

#tbl_header td:nth-child(2)
{
    width:50%; height:30px; text-align:right; /*background-color:red;*/
}
/*********************** Header table ***************************/





/*********************** message ***************************/
.header_div
{
    width:90%; height:60px; margin-left:5%; position:relative; background-color:White;
}

.date_div
{
    width:120px; height:40px; margin-top:10px; margin-left:4%; display:inline-block; vertical-align: top; text-align:left; font-size:14px; /*background-color:red;*/
}

.subject_div
{
    width:calc(92% - 120px); height:40px; margin-top:10px; display:inline-block; vertical-align: top; text-align:right; font-size:16px; font-weight:bold; /*background-color:green;*/
}


.body_div
{
    width:82%; margin-left:5%; padding:10px 4%; border-bottom-left-radius:20px; border-bottom-right-radius:20px; text-align:right; direction:rtl; font-size:16px; background-color:white; 
}

.message_space
{
    width:100%; height:4px; /*background-color:red;*/
}

.new_message_div
{
    width:100%; height:60px; line-height:60px; position:absolute; text-align:center; font-size:20px; font-weight:bold; background-color:white;
}
/*********************** message ***************************/








/* mobile - less than or equal to 320px */
 @media only screen and (max-width: 320px) {
   
    .date_div
    {
        width:100px; font-size:11px;
    }

    .subject_div
    {
        width:calc(96% - 140px); font-size:14px;
    }
}

/* mobile - greater than 320px and less than 401px */
 @media only screen and (min-width: 321px) and (max-width: 400px) {
 
}

/* mobile - greater than 400px and less than 481px */
 @media only screen and (min-width: 401px) and (max-width: 480px) {
    
}

/* tablet - greater than 480px and less than 769px */
 @media only screen and (min-width: 481px) and (max-width: 768px) {
        
}

 /* desktop - greater than 768px */
 @media only screen and (min-width: 769px) and (max-width: 1024px) {
       
}

 /* desktop - greater than 1024px */
 @media only screen and (min-width: 1025px) and (max-width: 1480px) {
       
}

 /* desktop - greater than 1480px */
@media only screen and (min-width: 1481px) {

}