@charset "utf-8";
/* CSS Document */

/****************** common header css start ******************/
*,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:"sans-serif";
}
#mainHead{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
}

#logo{
    margin-left: 30px;
    margin-top: 15px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    color: #00933b;
/*    color: rgba(33,103,1,1.00);*/
    
}

#headRtBtn{
    margin-right: 15px;
    margin-top: 8px;
    font-size: 20px;
    text-align: center;
    height: 40px;
    width: 100px;
    line-height: 32px;
    border: 2px solid #00933b;
    border-radius: 5px;
}

#headRtBtn>a{
    color: #00933b;
    text-decoration: none;
}

#cont{
    width:100%;
    height:560px;
    padding:10px;
    padding-bottom: 20px;
    display: flex;
}
        
#subCont{
    margin: auto;
    width: 1300px;
    height: 100%;
    border-radius: 20px;
    flex-shrink: 1;
    background-image: linear-gradient(to right bottom, #00933b, #07FF23);
    
}

a{
    color: #00933b;
    text-decoration: none;
}
#circle{
    width: 100px;
    height: 100px;
    position: absolute;
    border-radius: 50%;
    left: 80%;
    top: 25%;
    background: radial-gradient(circle at 40px 60px, #07FF23, #000);
}

#circle::after{
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
    left: -1000px;
    top: 270px;
    background: radial-gradient(circle at 40px 60px, #fafd10, #000); 
}

#circle::before{
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    left: -850px;
    top: 50px;
    background: radial-gradient(circle at 30px 30px, #ffcb0a, #000); 
}
/****************** common header css end ******************/







/********** index page css start from here *************/
#indexBx{
    padding-top: 150px;
    color: #fff;
}
      
#wlcmHead{
    font-size: 80px;
}

#wlcmHead,#wlcmSubHead{
    padding-top: 20px;
    text-align: center;
}
/********** index page css end from here *************/



/********** Login page css start from here *************/
#loginSubCont{
    margin: auto;
    width: 1300px;
    height: 100%;
    border-radius: 20px;
    padding-top: 10px;
    background-image: url("img/more-leaves-on-green.png");
}

#loginBx{
    color: #fff;
}
#logHead{
    color: #000;
    padding-top: 20px;
    text-align: center;
}

#loginForm{
    margin: auto;
    margin-top: 20px;
    width: 340px;
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.13);
}

input[type="text"],input[type="password"],input[type="email"] {
    width: 300px;
    padding: 10px;
    font-size: 18px;
    margin-bottom: 5px;
    border-radius: 4px;
    border: none;
    color: #000;
    background-color: rgba(255, 255, 255, 0.50);
}

#repass{
    margin-bottom: 20px;
}

input[type="text"]:focus, input[type="password"]:focus,input[type="email"]:focus{
    color: #000;
    outline:none;
}


#loginForm>label{
    color: #000;
    margin-bottom: 0px;
    font-size: 18px;
    display: inline-block;
    width: 150px;
    height: 40px;
}

#regMsg{
    color:#000;
    display: inline-block;
    width: 150px;
    height: 20px;
    margin-left: 50px;
}

input[type="submit"]{
    width: 100%;
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 10px;
    color:  #fff;
    border: 1px solid #000;
    background-color:#000000;
}

input[type="button"]{
    width: 176px;
    height: 40px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: none;color: #fff;
    background-color: #000;
}

/********** Login page css end from here *************/






/********** Dashboard page css Start from here *************/
#dashSubCont{
    margin: auto;
    width: 1300px;
    height: 100%;
    border-radius: 20px;
    padding-top: 50px;
    background-color: rgba(33,103,1,0.15);
}


#dashBx{
    padding-top: 30px;
    margin: auto;
    width: 400px;
    height: 250px;
    border-radius: 20px;
    background-color: rgba(201,201,201,0.62);
}

#dashbHeading{
    margin-bottom: 20px;
    color: rgba(33,103,1,1.00);
    text-align: center;
}

#userIcon{
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-image: url("img/user.png");
    background-size: cover;
    margin-bottom: 30px;
}

#userflname{
    color: rgba(33,103,1,1.00);
    text-align: center;
}

#options{
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    list-style-type: none;
}

#options>li{
    width: 100px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    border-radius: 5px;
    background-color: rgba(0,71,0,1.00);
}

#options>li>a{
    color: rgba(231,231,231,1.00);
    text-decoration: none;
}
/********** Dashboard page css end from here *************/





/********** Register page css start from here *************/

#regSubCont{
    margin: auto;
    width: 1300px;
    height: 100%;
    border-radius: 20px;
/*    background-color: rgba(33,103,1,0.15);*/
    background-image: url("img/more-leaves-on-green.png");
}

#regBx{
    margin: auto;
    color: rgba(33,103,1,1.00);
    padding: 20px;
    margin-top: 5px;
    width: 340px;
    border-radius: 10px;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 10px rgba(8, 7, 16, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.13);
}

#regHead{
    padding: 10px 0;
    text-align: center;
}

#loginQtag{
    display: inline-block;
    margin-left: 40px;
    color: #000;
}
#loginBtn{
    font-size: 18px;
}

#register>label{
    display: inline-block;
    width:275px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #000;
}

/********** Register page css end from here *************/





/********** Profile page css start from here *************/
#proSubCont{
    margin: auto;
    width: 1300px;
    height: 100%;
    border-radius: 20px;
    padding-top: 20px;
    background-color: rgba(33,103,1,0.15);
}

#proBx{
    margin: auto;
    width: 340px;
    color: rgba(33,103,1,1.00);
    background-color: rgba(201,201,201,0.62);
    border-radius: 20px;
    padding: 20px;
    padding-top: 5px;
}

#proHeading{
    text-align: center;
}



/********** Compose page css start from here *************/
#cmpSubCont{
    margin: auto;
    width: 1300px;
    height: 100%;
    border-radius: 20px;
    padding-top: 20px;
    background-color: rgba(33,103,1,0.15);
    
}


#cmpBx{
    padding-top: 30px;
    margin: auto;
    width: 800px;
    height: 300px;
    border-radius: 20px;
    padding: 20px;
    background-color: rgba(201,201,201,0.62);
}

#cmpHeading{
    margin-bottom: 20px;
    color: rgba(33,103,1,1.00);
    text-align: center;
}

#receiver{
    width: 100px;
    height: 40px;
    color: rgba(33,103,1,1.00);
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
}

#txtBx{
    width: 760px;
    height: 50px;
    margin-top: 140px;
    padding: 5px 0px 5px 10px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 0px 5px 5px #ccc;
}

#message{
    width: 700px;
    height: 40px;
    resize: none;
    float: left;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 20px;
    line-height: 30px;
    font-size: 18px;
    border: none; 
}

#message:focus{
    outline: none;
}

#sendBtn{
    width: 25px;
    height: 25px;
    margin-top: 8px;
}
/********** Compose page css end from here *************/









/********** Messages page css start from here *************/

#msgCont{
    margin: auto;
    width: 800px;
    height: 400px;
    border-radius: 20px;
    background-color: rgba(201,201,201,0.62);
    border: 20px solid #C3C3C3;
}

#msgBx{
    height: 320px;
    overflow-y: scroll;
}

#msgHead, #msgData{
    width: 740px;
    background-color: rgba(201,201,201,0.62);
    text-align: center;
    border: 1px solid;
    border-radius: 10px;
    border-collapse: collapse;
    overflow: hidden;
}

th{
    font-size: 20px;
    border: 1px solid #ccc;
    padding: 0 5px;
    height: 40px;
    background-color: #00933b;
    color: #fff;
    
}
td{
    border-bottom: 1px solid;
    border: 1px solid #ccc;
    height: 30px;
}

tr:nth-child(even){
    background-color: rgba(127,127,127,1.00);
}




/********** Messages page css end from here *************/










/****************** common footer css style start ******************/
#foot{
    width: 100%;
    height: 80px;
    background-color: #050810;
    display: flex;
    justify-content: space-between;
}
        
#footLogo{
    margin-left: 30px;
    margin-top: 30px;
    text-align: center;
    color: #ccc;
    font-size: 25px;
    font-weight: 700;
}
        
#footOpt{
    margin: auto;
    margin-top: 30px;
    width: 400px;
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    font-size: 18px;
            
}
        
#footOpt>li{
    color: #ccc;
}
        
        
#subfoot{
    width: 100%;
}
        
#rights{
    color: #ccc;
    margin: 0;
    padding-left: 20px;
    background-color:#000;
    line-height: 30px;
    text-align: center;
}

/****************** common footer css style end ******************/
#show {
    width: 16px;
    height: 16px;
    background-image: url("img/hidden.png");
    background-size: cover;
    position: absolute;
    margin: -32px 0px 0px 270px
}

#show:hover{
    cursor: pointer;
}

/****************** Alert CSS Start ******************/
#alert, #passError {
    width: 335px;
    height: 50px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:absolute;
    top:10px;
    left: 510px;
    border-radius: 3px;
    box-shadow: 0 0px 20px rgba(8, 7, 16, 0.6);
    background-color:rgba(12,175,0,0.80);
}

#passError{
    background-color:rgba(255,0,0,0.80);
}

#alert>h1, #passError>h1{
    font-size: 18px;
    color: #fff;
}
#closeBtn{
    background-color: #333;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 4px;
    font-weight: 900;
    letter-spacing: 1.5px;
    
}

#alert:target{
    display: none;
}

#passError:target{
    display: none;
}
/****************** Alert css end ******************/