#MainBody_div {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #a7b3ef;
}

#Main_div {
    width: 80%;
    height: 300px;
    float: left;
    margin-left: 10%;
    margin-top: 10px;
    /*border: 1px solid black;*/
    box-shadow: 5px 5px 10px black;
}

#Top_div {
    width: 100%;
    height: 50px;
}

#Reponse_div {
    border-radius: 5px;
    width: 80%;
    height: 200px;
    background-color: black;
    color: yellow;
    float: left;
    margin-left: 10%;
    margin-top: 10px;
    overflow-y: scroll;
}

.ClientPics_class {
    width: 60px;
    height: 70px;
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 5px;
    border: 1px solid gray;
}

#loginFrame {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: black;
    z-index: 200000;
    position: absolute;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='141.42' height='141.42' viewBox='0 0 141.42 141.42'><g transform='rotate(45 70.71 70.71)'> <rect x='20.71' y='20.71' width='100' height='100' fill='white' stroke='whitesmoke' stroke-width='1' /> </g> </svg>");
    background-repeat: repeat;
    background-size: 100px 100px;
    background-color: #fff;
    transition: all 0.3s;
   
}




#pageContent {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    /*background-image: url('../images/background1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%,100%;
    border: 3px solid #ffde5d;*/
    background-color: white;
}




#fullMessageFrame {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    display: none;
    background-color: rgba(0, 0, 0, 0.824);
    z-index: 300001;
}
.MessageTimer {
    position: absolute;
    bottom: 1px;
    left: 0px;
    background-color: #34cd34;
    height: 5px;
 
}

#messageFrame {
    width: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 300001;
    position: absolute;
}
.MessageContentFrame {
    position:relative;
    float: right;
    margin-bottom: 5px;
    width: 100%;
    border-bottom: 1px solid #34cd34;
    min-height: 100px;
    background-color: white;
    
}

/*.HorizentalCenterlocation {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);*/
.MessageText {
    z-index: 1100;
    color: #34cd34;
    text-align: center;
    background-color: transparent;
    font-family: IRANSANSWEB;
    font-size: 20px;
    text-decoration: none;
    margin: 20px;
}
.MessageIcon {
    z-index: 1100;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/checked.png");
    width: 80px;
    height: 80px;
    margin: 15px;
}

#closeMessageFrame {
   
    z-index: 1001;
    float: left;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/close.png');
}

#popupBackground {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.5);*/
    z-index: 9;
}

/*/////////////////////////////////////////////*/
#userInfoFrame {
    width: 320px;
    height: 400px;
    top: 0px;
    left: 0px;
    position: absolute;
    border: 3px solid #ffde5d;
    background: black;
    border-radius: 8px;
    z-index: 100;
    display: none;
    font-family: IRANSANSWEB;
    font-size: 18px;
    text-decoration: none;
}


#userStatusBorder {
    font-family: IRANSANSWEB;
    direction: rtl;
    font-size: 16px;
    padding: 2px 2px 2px 2px;
    display: none;
    color: White;
    margin-top: 1px;
    float: left;
    margin-left: 8px;
}

#userRolesCbx {
    width: 290px;
    margin-top: 4px;
    float: left;
    margin-left: 10px;
    font-size: 16px;
}

#userFullName {
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    color: white;
    width: 100%;
    text-align: center;
}

#ipAddress {
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    color: white;
    width: 100%;
    text-align: center;
   
}

#showProile_btn {
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    color: blue;
    width: 100%;
    text-align: center;
    cursor:pointer;
}

#userImage {
    border-radius: 50%;
    border: 3px solid silver;
    margin-left: 11px;
    margin-top: 4px;
    float: left;
    width: 50px;
    height: 50px;
    background-image: url('../images/user.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%,110%;
    cursor: pointer;
}

#userImage2 {
    border-radius: 50%;
    border: 3px solid silver;
    margin-top: 10px;
    margin-left: 105px;
    float: left;
    width: 120px;
    height: 120px;
    background-image: url('../images/user.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%,110%;
    cursor: pointer;
}

#userImageMenu {
    margin-top: 26px;
    float: left;
    width: 17px;
    height: 17px;
    background-image: url('../images/desc.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    opacity:0.9;
    cursor:pointer;

}

#userImageFrame {

    margin-left: 10px;
    float: left;
    width: 55px;
    margin-top: 4px;
}

#userNameFrame {
    width:auto;
    margin-left: 10px;
    float: left;
    margin-top: 4px;
}

#serverDate {
    margin-top: 18px;
    margin-left: 11px;
    float: left;
    width: auto;
    text-align: center;
}

#logoutButton {
    margin-top: 18px; 
    margin-left: 6px;
    float: left;
    background-color: transparent;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/off.png');
    width: 25px;
    height: 25px;
}

#systemLogoBorder {
    margin-right: 0px;
    float: right;
}

#systemLogo {
    margin-top: 5px;
    float: right;
    width: 60px;
    height: 60px;
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%,80%;
}
#systemTitle {
    margin-top: 13px;
    margin-right: 3px;
    float: right;
    font-size: 18px;
    font-family: IRANSANSWEB;
    color: White;
    font-style: italic;
}
.HeaderMenuItem {
    margin-top: 5px;
    margin-right: 9px;
    float: right;
    font-size: 13px;
    font-family: IRANSANSWEB;
    color: #c8cbff;
    cursor: pointer;
}
    .HeaderMenuItem:hover {
        color: yellow;
       
    }

#pageMiddle {
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: coral
}

#verticalPanel {
    background-color: Black;
    height: 100%;
    width: 55px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.PanelButton {
    background-color: transparent;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    background-position: center;
    background-size: 100%,100%;
    cursor: pointer;
    display: inline-block;
    margin-top: 30px;
    margin-right: 10px;
}

#homeButton 
{
   background-image: url('../images/home.png');
}

#menuButton 
{
   background-image: url('../images/menu.png');
}

#reportButton {
    background-image: url('../images/Report.png');
}

#messengerButton {
    background-image: url('../images/mail.png');
}

#informationBankButton {
    background-image: url('../images/Database.png');
}
#projectMonitoringButton {
    background-image: url('../images/Monitoring.png');
}
#programMonitoringButton {
    background-image: url('../images/MonitoringPrograms.png');
}
#controlProjectsButton {
    background-image: url('../images/ControlProject.png');
}

#menuBar {
    background-image: url('../images/ground.png');
    width: 280px;
    height: 99%;
    margin-top: 2px;
    border-radius: 10px;
    background-color: transparent;
    position: fixed;
    z-index: 1000;
    overflow-y: auto;
    right: -289px;
    transition: all 0.2s;
    /* box-shadow: 0px 0px 20px 1px black;*/
    border: 3px solid black;
}




/*////////////////////////////////////////////////////////// Login*/

#loginPanel0 {
    opacity:0.85;
    margin-top:15px;
    margin-right:10px;
    width:390px;
    
}

.calendarSlice {
    margin-right: 10px;
    background-image: url(../images/calendar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%,100%;
    float: right;
    width: 110px;
    height: 110px;
}

#calendarDay {
    font-family: IRANSANSWEB;
    font-size: 28px;
    font-weight: bolder;
    margin-top: 28px;
    width: 100%;
    height: 40px;
}

#calendarMounth {
    font-family: IRANSANSWEB;
    font-size: 22px;
    font-weight: bolder;
    margin-top: 30px;
    width: 100%;
    height: 40px;
}

#calendarYear {
    font-family: IRANSANSWEB;
    font-size: 28px;
    font-weight: bolder;
    margin-top: 26px;
    width: 100%;
    height: 40px;
}

/*////////////////////////////  Dashboard   /////////////////////////////*/

#dashboard {
    transition: all 0.8s;

    width:560Px;
  


}

.DashboardButtons {
    position: relative;
    float: right;
    width: 160px;
    height: 160px;
    margin-top: 15px;
    margin-right: 15px;
    border-radius: 10px;
    background-color: transparent;
}

.DashboardCounterDiv {
    color: red;
    font-family: IRANSansN;
    font-size: 11px;
    width: 30px;
    height: 10px;
    margin-top: 5px;
    text-align: center;
}

.DashboardCounterFrame {
    background-repeat: no-repeat;
    background-size: 100%,100%;
    background-image: url(../images/Counter.png);
    z-index: 1;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0px;
    right: 0px;
    background-color: transparent;
}

.DashboardButtonsDiv {
    position: relative;
    float: right;
    width: 160px;
    height: 160px;
    margin-top: 15px;
    margin-right: 15px;
    border-radius: 10px;
    background-color: transparent;
}


.DashboardButtons {
    box-shadow: 10px 10px 10px gray;
    position: absolute;
    z-index: 0;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    border-radius: 10px;
    background-size: 100%,100%;
    background-color: transparent;
}


/*///////////////////////////////  User Profile   /////////////////////////////*/

#userProfile1 {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom:0px;
    right:0px;
    position: absolute;   
    background: white;   
    z-index: 100;
    /*display: none;*/
    font-family: IRANSANSWEB;
    font-size: 16px;
    text-decoration: none;
}