*{
    margin: 0;
    padding: 0;
}

.container{
    background: rgb(8, 77, 34, .5);
    background-image: url('../images/student.jpg');
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-size: 100% 100%;
}

#first_page{
    padding: 4px;
}

#inner_firstPage{
    margin: 15% auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header{
    padding: 15px 0 10px;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    /* border: 3px solid red; */
    font-size: 35px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    margin-left: 5%;
    cursor: pointer;
}

.green{
    color: lightgreen;
}

.navbar{
    /* border: 1px solid red; */
    margin-top: 1%;
    margin-right: 9%;
    width: 20%;
}

.navbar a{
    /* border: 1px solid #fff; */
    display: inline-block;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    margin-left: 10%;
}

.navbar a:hover{
    color: #0ef;
}

.section{
    margin: 0 auto;
}

    /***** LANDING PAGE *****/
.landing_view{
    padding: 0 10px 40px;
}

#inner_landing_view{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#inner_landing_view h1, #inner_landing_view h2, #inner_landing_view h3{
    font-family: tahoma;
    letter-spacing: 1.5px;
    font-weight: bold;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    color: white;
    text-transform: uppercase;
}

#inner_landing_view h1{
    /* border: 1px solid red; */
    font-size: 40px;
    margin-top: 2%;
    animation: slideLeft 1s ease forwards;
    animation-delay: 1s;
}

#inner_landing_view h2{
    font-size: 25px;
    margin-top: 3%;
    margin-bottom: 2%;
    animation: slideRight 1s ease forwards;
    animation-delay: 1s;
}

#startBtn{
    border: 1px solid green;
    border-radius: 15px;
    font-size: 15px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px;
    color: white;
    background-color: green;
    cursor: pointer;
    margin-top: 7%;
    animation: zoomIn 1s ease forwards, floatImage 4s ease-in-out infinite;
    animation-delay: 2s, 3s;
}

#main_section{
    border-bottom: 1px solid lightgray;
    display: none;
}

.inner_section{
    display: flex;
    margin-bottom: 1%;
}

    /***** ABOUT US *****/
.about-contact{
    /* border: 1px solid blue; */
    background: rgb(8, 77, 34, .4);
    width: 50%;
    margin-top: 1%;
    margin-left: 2%;
    /* display: none; */
}

#about, #contact{
    /* border: 1px solid red; */
    width: 80%;
    height: auto;
    margin: 5% auto 0;
    padding: 10px;
}

#contact{
    display: none;
    width: 95%;
    margin: 1% auto 0;
}

#about > img{
    border-radius: 10px;
    width: 150px;
    height: 150px;
    padding-right: 10px;
    float: left;
}

#about p, #contact p{
    text-align: justify;
    white-space: wrap;
    word-spacing: 4px;
    line-height: 25px;
    color: white;
    font-size: 15px;
    letter-spacing: 1px;
}

#inner_contact h2, .forgetPass h2, .verify_accessCode h2, 
.new_passwordBox h2, .adm_reg_code h2, .adm_reg_fac h2, #generate_code h2, 
#importBox h2, #all_deptView h2, #stud-clearance h2{
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-transform: uppercase;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

#inner_contactBox, #cont_text_area{
    /* border: 1px solid blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#contact_leftRightForm{
    display: flex;
    flex-direction: row;
}

#contact_leftForm, #contact_rightForm{
    width: 50%;
}

#contact_leftForm{
    padding: 10px 30px 10px 0;
}

#contact_rightForm{
    padding: 10px 10px 10px 0;
}

#inner_contactBox .inputBox{
    /* border: 1px solid red; */
    padding: 5px 0;
    width: 100%;
    margin-bottom: 6%;
}

#inner_contactBox .inputBox label, .inner .inputBox label,
.login .inputBox label, .register .inputBox label, 
.acc-update .inputBox label, .inner_code_gen .inputBox label,
#import_file .inputBox label, #firstPage_box .inputBox label,
#updSess_box .inputBox label, .receipt_box .inputBox label, 
#get_receipt .inputBox label, #updRegNum_box .inputBox label{
    font-family: tahoma;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

#inner_contactBox .inputBox input, #inner_contactBox .inputBox textarea, 
.inner .inputBox input, .inner .inputBox select, 
.inner_code_gen .inputBox select, #import_file .inputBox input, 
#import_file .inputBox select, #firstPage_box .inputBox select{
    /* border: 1px solid black; */
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 90%;
    margin-top: 4%;
}

#firstPage_box .inputBox select{
    width: 100%;
    margin-top: 6%;
    margin-bottom: 10%;
}

#inner_contactBox .inputBox textarea{
    width: 95%;
    padding: 10px;
    text-align: justify;
    font-weight: normal;
    line-height: 20px;
}

#inner_contactBox input[type="submit"], .inner input[type="submit"], 
#firstPage_box input[type="submit"]{
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
}


    /***** LOGIN CODE *****/
.home-login{
    /* border: 1px solid red; */
    width: 35%;
    margin-top: 1%;
    margin-left: 10%;
    /* display: none; */
}

.login{
    border: 1px solid white;
    border-radius: 15px;
    margin: 0 auto;
    background: rgb(8, 77, 34, .4);
    box-shadow: 4px 4px 2px rgba(255, 255, 255, .7);
    height: 550px;
    overflow: auto;
}

.login > h2, .register h2{
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

.admin, .log_stud, #login_dept, #deptFac_submitBtn, .dept, 
.other, .fac{
    display: none;
}

.login .inputBox{
    /* border: 1px solid red; */
    padding: 5px 0;
    width: 75%;
    margin: 0 auto 5%;
}

.login .inputBox input, .login .inputBox select, 
.register .inputBox input, .register .inputBox select{
    border: 1px solid black;
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 91%;
    margin-top: 2%;
}

.login .inputBox select, .register .inputBox select{
    width: 100%;
}

.radio{
    /* border: 1px solid red; */
    display: none;
}

#log_dept, #log_fac, #log_fresh, #log_stay{
    color: white;
}

.login .inputBox input[type="radio"]{
    /* border: 1px solid yellow; */
    margin-left: 10%;
}

.login input[type="submit"], .register input[type="submit"]{
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
}

#forget_signUp{
    /* border: 1px solid white; */
    display: flex;
    flex-direction: row;
    margin-top: 4%;
}

.login #forget, .login #sign_up{
    /* border: 1px solid red; */
    text-align: center; 
    color: #fff;
    font-style: italic;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

#forget_signUp a{
    /* border: 1px solid red; */
    text-decoration: none;
}

.login #sign_up{
    margin-left: 40%;
    width: 20%;
}

        /***** REGISTER CODE *****/
.home-register{
    /* border: 1px solid red; */
    display: none;
    width: 95%;
    margin: 0 auto;
    overflow-y: scroll;
    height: 580px;
    border-radius: 20px;
}

.closeReg, .closeForget{
    /* border: 1px solid yellow; */
    display: flex;
    justify-content: right;
    margin-top: 3%;
}

#admin_reg{
    /* border: 1px solid blue; */
    font-size: 18px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
    cursor: pointer;
    margin-right: 5%;
    margin-bottom: 1%;
    padding-top: 15px;
}

#admin_reg a{
    text-decoration: none;
    color: white;
}

.closeReg > a, .closeForget > a{
    text-decoration: none;
    border: 1px solid red;
    border-radius: 8px;
    background: red;
    color: white;
    font-size: 15px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px;
    margin-right: 5%;
    margin-bottom: 1%;
    cursor: pointer;
}

.register{
    /* border: 1px solid white; */
    border-radius: 20px;
    /*background: rgb(8, 77, 34, .4);*/
    /*box-shadow: 4px 4px 2px rgba(255, 255, 255, .7);*/
    padding-bottom: 20px;
}

.register .inputBox{
    /* border: 1px solid red; */
    padding: 5px 0;
    width: 75%;
    margin: 12% auto;
}

.register .inputBox input, .register .inputBox select{
    margin-top: 5%;
}

#reg_select_type{
     /*border: 1px solid red; */
    width: 25%;
    margin-top: 5%;
}

#registerBtn, #staff_registerBtn, #bck2Pre_reg, #reg_staff, #reg_student{
    display: none;
}

.input_span{
    color: white;
}

#stud_register_form, #staff_register_form{
    /* border: 1px solid red; */
    display: none;
    margin-bottom: 1%;
}

#stud_register_form hr{
    width: 90%;
    margin: 0 auto;
}

.reg_phase_one, #reg_leftRight_sponsor{
    /* border: 1px solid blue; */
    display: flex;
    justify-content: space-between;
    margin: .5%;
}

.reg_phase_two{
    /* border: 1px solid blue; */
    display: flex;
    margin: .5%;
}

.reg_top_phaseOne, .reg_bottom_phaseTwo, .reg_sponsor{
    /* border: 1px solid red; */
    width: 33%;
}

.reg_top_phaseOne .inputBox:nth-child(1){
    margin-top: 5%;
}

#regSubmitBtn, #staff_regSubmitBtn, #log_regSubmitBtn, #getRec_submitBtn{
    display: flex;
    justify-content: center;
    align-items: center;
}

#regNextBtn{
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto 2%;
}

#regNextBtn button{
    border: 1px solid green;
    border-radius: 10px;
    background-color: green;
    font-family: tahoma;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    padding: 10px 15px;
    cursor: pointer;
}

.login #forget:hover, .login #sign_up:hover, .register #log_in:hover{
    color: chartreuse;
}


        /********** ADMIN PAGE CODE **********/
#adm-header, #admin{
    /* border: 1px solid red; */
    padding: 0;
}

.header > p{
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.admin-nav{
    /* border: 1px solid red; */
    height: 70px;
    margin: .5% 10% 0 0;
    /* display: none; */
}

/* #down, #up{
    color: white;
    display: none;
    margin: .5% 10% .5% 0;
} */

.admin-nav img{
    /* border: 1px solid gray; */
    width: 70px;
    height: 70px;
    border-radius: 50px;
    cursor: pointer;
}

.admin-home{
    padding: 5.5px;
}

#deptList, #sublist{
    position: absolute;
    top: 125px;
}

#deptList{
    top: 210px;
}

#sublist{
    top: 40px;
}

#add-del, #account-update, #fee-type, #fetch-details,
#get-details, #upload-table{
    display: none;
}

    /***** ADD/DELETE CODE *****/
#add-del{
    /* border: 1px solid red; */
    height: inherit;
}

#addDel-wrappper{
    /* border: 1px solid yellow; */
    display: flex;
    justify-content: center;
}

.addDelBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 30%;
    margin: 5% auto 5%;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.addDelBox > h2, .receiptBox > h2, .verifyBox > h2, 
.confirm_status > h2{
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

.addDelBox .inputBox, .sessionView .inputBox{
    /* border: 1px solid red; */
    margin: 12% 0 ;
    padding: 10px 0;
}

.addDelBox .inputBox input, .addDelBox .inputBox select, 
.receiptBox .inputBox select, .receiptBox .inputBox input[type="text"], 
.confirm_status .inputBox input, .codeBox .inputBox select, 
.sessionView .inputBox input{
    border: 1px solid black;
    border-radius: 10px;
    /* border: none; */
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 58%;
    margin-left: 21%;
}

.addDelBox .inputBox select, .sessionView .inputBox input{
    color: gray;
}

#btn, #sess_btn{
    /* border: 1px solid red; */
    margin-top: 15%;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.addDelBox input[type="submit"], 
.feeBox input[type="submit"], .statusBox input[type="submit"], 
.fetchBox input[type="submit"], .getBox input[type="submit"], 
.sessionView input[type="submit"]{
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: 9%;
    margin-bottom: 5%;
    height: 40px;
}

.addDelBox input[type="submit"]:nth-child(1), 
.sessionView input[type="submit"]:nth-child(1){
    margin-left: -.5%;
}

.addDelBox .back{
    /* border: 1px solid red; */
    text-align: center; 
    color: rgb(9, 109, 9);
    font-style: italic;
    font-size: 15px;
    font-weight: bold;
    margin:  6% 0 10% 1%;
    width: 40%;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
}

#finalYear{
    display: none;
    height: 40%;
    margin-top: 8%;
}

#finalYear input[type="submit"]{
    margin-left: 39%;
}

    /***** ACCOUNT UPDATE CODE *****/
#acc_status, #receipt_upload, #receipt_table_box{
    padding: 5px;
    display: none;
}

#acc_status{
    margin-top: 1%;
}

#account-update, #deptAccount-update, #clr_account-update{
    margin-top: 4%;
}

.account-wrapper{
    display: flex;
    justify-content: space-between;
    margin: 1%;
}

.acc-update{
    border: 1px solid white;
    border-radius: 15px;
    width: 30%;
    height: 510px;
    margin-left: 15%;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
    overflow-y: scroll;
}

.acc-update > h2, .passportUpd > h2, .sponsorBox > h2, #inner_deptView > h2, 
#updSess_box > h2, .receipt_box > h2, #get_receipt_box > h2,
#updRegNum_box > h2, #receipt_table_box > h2{
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-transform: uppercase;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

.acc-update .inputBox, #updSess_box .inputBox, #updRegNum_box .inputBox{
    /* border: 1px solid red; */
    width: 70%;
    margin: 5% auto;
    padding: 10px 0;
}

.acc-update .inputBox:nth-child(1), #updSess_box .inputBox:nth-child(1), 
#updRegNum_box .inputBox:nth-child(1){
    margin-top: 3%;
}

.acc-update .inputBox input, #updSess_box .inputBox select, 
.receipt_box .inputBox select, .receipt_box .inputBox input,
#get_receipt .inputBox select, #updRegNum_box .inputBox input{
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 100%;
    margin-top: 5%;
}

#updRegNum_box .inputBox input{
    width: 90%;
}

.showBox{
    /* border: 1px solid red; */
    display: flex;
    justify-content: right;
    align-items: right;
    margin-right: 5%;
}

.rec_showBox p{
    font-family: tahoma;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    text-transform: capitalize;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    cursor: pointer;
}

#updSess_wrapper, #updRegNum_wrapper, .clear, #bck2Rec, #get_receipt_box, .getRec_dept{
    display: none;
}

#get_receipt_box{
    margin-bottom: 9%;
    padding: 1px;
}

#updSess_wrapper, #updRegNum_wrapper{
    margin: 2% 0;
    padding: 5px;
}

#updSess_box, #updRegNum_box{
    border: 1px solid white;
    width: 30%;
    margin: 0 auto 5%;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
    border-radius: 15px;
}

#show-all{
    font-family: tahoma;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
    cursor: pointer;
}

.option{
    display: none;
}

#adm_userId, #stud_userId{
    background-color: lightgray;
    cursor: not-allowed;
}

.acc_regSubmitBtn{
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.acc-update input[type="submit"], .passportUpd input[type="submit"], 
#updSess_box input[type="submit"], .receipt_box input[type="submit"],
#get_receipt input[type="submit"], #updRegNum_box input[type="submit"]{
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    cursor: pointer;
    margin-bottom: 2%;
    border: none;
    outline: none;
}

#updSess_box input[type="submit"], #updRegNum_box input[type="submit"]{
    margin-bottom: 5%;
}

    /***** PASSPORT UPDATE CODE *****/
.passportUpd{
    border: 1px solid white;
    border-radius: 15px;
    width: 30%;
    margin-right: 15%;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

#upload-adm-img, #upload_studImg{
    /* border: 1px solid black; */
    width: 70%;
    margin: 8% auto;
}

#addImgBox, #studImgBox{
    /* border: 1px solid red; */
    border-radius: 10px;
    width: 60%;
    height: 160px;
    background: lightgray;
    margin: 0 20%;
}

.adm-img-btn, .receipt-btn{
    font-size: 13px;
    background: white;
    border-radius: 50px;
    width: 55%;
    margin: 6% 20%;
    outline: none;
    padding: 10px;
    background-color: lightgreen;
    cursor: pointer;
}


/***** RECEIPT UPLOAD CODE *****/
#receipt_wrapper{
    height: inherit;
    overflow: auto;
}

.rec_showBox{
    display: flex;
    justify-content: right;
    align-items: right;
    margin: 1% 15% 1% 0;
}

.receipt_box, #get_receipt{
    border: 1px solid white;
    border-radius: 15px;
    width: 30%;
    margin: 0 auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
}

#get_receipt_box  p{
    margin: 2.5%;
}

#get_receipt_box  p > a{
    text-decoration: none;
    color: white;
}

.receipt_box .inputBox, #get_receipt .inputBox{
    /* border: 1px solid red; */
    width: 80%;
    margin: 5% auto;
    padding: 10px 0;
}

.receipt_box .inputBox input[type="file"]{
    font-size: 13px;
    background: white;
    outline: none;
    background-color: lightgreen;
    cursor: pointer;
    width: 90%;
}

.receipt_box input[type="submit"], #get_receipt input[type="submit"]{
    margin-top: 5%;
    margin-bottom: 5%;
}


    /***** FEES CODE *****/
#fee-type{
    /* border: 1px solid red; */
    height: inherit;
    color: black;
}

.fee-wrapper{
    /* border: 1px solid yellow; */
    display: flex;
    justify-content: center;
}

.feeBox, .fetchBox, .getBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 30%;
    margin: 3% auto 0;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.feeBox{
    margin-top: 5%;
}

.feeBox > h2, .fetchBox > h2, .getBox > h2{
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

.feeBox .inputBox{
    /* border: 1px solid red; */
    margin: 8% 0 ;
    padding: 10px 0;
}

.feeBox .inputBox input, .feeBox .inputBox select{
    border: 1px solid black;
    border-radius: 10px;
    /* border: none; */
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 59%;
    margin-left: 21.5%;
}

.feeBox .inputBox select{
    color: gray;
}

.feeBox .inputBox input[type="radio"], .login .inputBox input[type="radio"],
.statusBox .inputBox input[type="radio"], .confirm_status .inputBox input[type="radio"]{
    /* border: 1px solid yellow; */
    width: 7%;
}

.dept, .faculty{
    letter-spacing: 1px;
    font-weight: bold;
    color: gray;
}

.feeBox input[type="submit"]{
    margin: 2% 37% 7%;
}

    /***** STATUS CODE *****/
#check-status{
    border: 1px solid white;
    height: inherit;
    color: black;
    display: none;
}

.status-wrapper{
    /* border: 1px solid yellow; */
    display: flex;
    justify-content: center;
}

.statusBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 30%;
    margin: 1.5% auto 0;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.statusBox > h2, #student_register > h2, #staff_register > h2, 
#sessionBox  h2{
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

.statusBox .inputBox, .fetchBox .inputBox, .getBox .inputBox{
    /* border: 1px solid red; */
    margin: 10% 0 ;
    padding: 10px 0;
}

.statusBox .inputBox input, .statusBox .inputBox select,
.fetchBox .inputBox input, .getBox .inputBox input{
    border: 1px solid black;
    border-radius: 10px;
    /* border: none; */
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 59%;
    margin-left: 21.5%;
}

.statusBox .inputBox select{
    color: gray;
}

.statusBox input[type="submit"]{
    margin: 2% 37% 7%;
}

#status_display{
    /* border: 1px solid red; */
    width: 70%;
    margin: 5% auto;
    display: none;
}

#status_display h3, #session_view h3{
    /* border: 1px solid red; */
    border-radius: 10px;
    /* width: 5%; */
    margin-left: 85%;
    /* line-height: 40px; */
    padding: 10px;
    font-family: tahoma;
    font-size: 20px;
    font-weight: bold;
    color: red;
    text-align: center;   
    cursor: pointer;
}

#status_display h3:hover, #fresh_box h3:hover, #session_view h3:hover{
    color: #fff;
    background-color: red;
}

#status_display p{
    /* border: 1px solid red; */
    border-radius: 50px;
    /* line-height: 40px; */
    font-family: tahoma;
    font-size: 20px;
    font-weight: bold;
    color: red;
    /* text-align: center;    */
    padding: 10px 0 5px 20px;
}

#status_output{
    /* border: 1px solid green; */
    width: 90%;
    margin: 1% auto;
}

#status_output table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

th{
    border: 1px solid green;
    background-color: green;
    color: white;
    font-size: 18px;
}

td{
    border: 1px solid white;
    margin-top: .5%;
    color: white;
    font-size: 17px;
    font-weight: bold;
    font-family: tahoma;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

td, th {
    text-align: center;
    padding: 10px;
}

td a{
    text-decoration: none;
    color: white;
}

tr:nth-child(odd) {
    background-color: #dddddd;
}

.fetchBox, .getBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 30%;
    margin: 7% auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.fetchBox input[type="submit"], .getBox input[type="submit"]{
    margin-left: 40%;
}


    /***** DASHBOARD HOME CODE *****/
.dash_home{
    position: relative;
    /* border: 1px solid red; */
    height: 600px;
    color: black;
    /* display: none; */
    padding: 3px;
}

.dash_home_body{
    /* border: 1px solid blue; */
    padding: 3px;
}

.dash_home_body marquee{
    font-family: tahoma;
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: bold;
    color: white;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    text-transform: uppercase;
    word-spacing: 10px;
}

.inner_dash_home, #completed{
    /* border: 1px solid blue; */
    width: 95%;
    margin: 0 auto;
}

.inner_dash_home h2, #completed h2{
    font-size: 25px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 2%;
    padding-left: 20px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

.inner_dash_home > ul, #completed > ul{
    /* border: 1px solid red; */
    margin-top: 2%;
    padding-left: 30px;
}

.inner_dash_home > ul > li, #completed > ul > li{
    /* border: 1px solid white; */
    list-style: none;
    padding: 10px;
    font-size: 20px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

.inner_dash_home > ul ul > li, #completed > ul ul > li{
    /* border: 1px solid yellow; */
    list-style: none;
    padding: 12px 0 12px 30px;
    font-size: 18px;
}

    /***** VALIDATION CODE *****/
#stud-validate, #stud-clearance, #clr_stud-clearance, #deptStud-clearance, 
.clr_receipt_process{
    position: relative;
    /* border: 1px solid red; */
    height: 650px;
    display: none;
    overflow-y: scroll;
}

.section_status_box{
    /* border: 1px solid red; */
    display: flex;
    justify-content: right;
    width: 90%;
    margin: 1% 0 1% 5%;
}

.section_status_box .inputBox input{
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
}

.section_status_box input[type="submit"]{
    color: white;
    background-color: green;
    cursor: pointer;
}

.secSta_display{
    /* border: 1px solid red; */
    display: none;
    width: 20%;
    margin: 5% 0 0 40%;
    cursor: pointer;
}

.secSta_display p{
    margin-bottom: 5%;
}

.secSta_over{
    /* border: 1px solid red; */
    text-align: center;
    color: white;
    margin-top: 15%;
    margin-left: 15%;
    font-weight: bold;
    letter-spacing: 2px;
}

.validateBox, .validateBox_status{
    width: 90%;
    height: 500px;
    margin: 1% 0 1% 5%;
    overflow-y: scroll;
}

.validateBox_status{
    height: 468px;
    overflow: auto;
}

#validTabl, #clearTabl, #clr_clearTabl, #dept_clearTabl, #receiptTabl,
#clrRec_validTabl{
    border: 1px solid blue;
    width: 98%;
    margin: 0 auto;
}

.validateBox select{
    border: none;
    outline: none;
    border-radius: 5px;
    width: inherit;
    padding: 8px;
    font-family: tahoma;
    color: black;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

.validateBox button{
    border: 1px solid green;
    border-radius: 10px;
    padding: 10px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-weight: bold;
    color: white;
    background-color: green;
    text-align: center; 
    cursor: pointer;
}

.iframe_body{
    position: absolute;
    top: 400px;
    width: 100%;
    height: inherit;
    margin: 6% auto;
    /* border: 1px solid red; */
    margin-bottom: 2%;
    display: none;
}

.iframe{
    /* border: 1px solid white; */
    display: flex;
    justify-content: center;
    height: 100%;
}

.iframe iframe{
    /* border: 1px solid red; */
    width: 80%;
    margin-bottom: 1%;
}


    /***** UPLOAD TABLE CODE *****/
#upload-table{
    border: 1px solid white;
    height: inherit;
}

.uploadBox, .generateBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 35%;
    margin: 7% auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.uploadBox .inputBox{
    /* border: 1px solid red; */
    margin: 5%;
    padding: 10px;
}

.uploadBox .inputBox select, .generateBox .inputBox select,
.generateBox .inputBox input{
    border: 1px solid black;
    border-radius: 10px;
    /* border: none; */
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 59%;
    margin-left: 21.5%;
    color: gray;
}

.uploadBox .inputBox input{
    font-size: 18px;
    color: gray;
    font-weight: bold;
    margin: 5% 23%;
    cursor: pointer;
}

#fileBox h4{
    /* border: 1px solid red; */
    color: black;
    margin-left: 23%;
    font-weight: bold;
}

.uploadBox input[type="submit"], .generateBox input[type="submit"]{
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: 40%;
    margin-bottom: 5%;
    height: 40px;
}

#gLink, #linkBack{
    /* border: 1px solid red; */
    padding: 10px 40px;
    font-weight: bold;
    letter-spacing: 1;
    color: green;
    cursor: pointer;
}

.generateBox{
    display: none;
}

.generateBox .inputBox{
    /* border: 1px solid red; */
    margin: 5% 0 7%;
    padding: 10px;
}

        /***** DEPARTMENT ADMIN UNIQUE CODE GENERATOR CODE *****/
#generate_code{
    height: 500px;
    display: none;
}

.adm_code_gen{
    border: 1px solid lightcyan;
    margin-top: 1%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#get_code{
    font-family: tahoma;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    color: white;
    margin-top: 2%;
    margin-right: 20%;
    cursor: pointer;
}

.get, #get_genBtn, #sessBtn, #sess_doc, #stampBtn, #stamp{
    display: none;
}

.inner_code_gen .inputBox{
    width: 25%;
    margin: 2% auto;
}

.inner_code_gen .inputBox select{
    width: 100%;
    padding: 10px;
    margin-top: 2%;
}

.inner_code_gen input[type="submit"], #import_file input[type="submit"]{
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
    margin-bottom: 3%;
}


        /***** IMPORT FILE CODE *****/
#import_wrapper{
    display: none;
}

#importBox{
    display: flex;
    flex-direction: column;
    padding: 3px;
}

.show_box{
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 110px;
}

#show_box2{
    /* border: 1px solid blue; */
    top: 160px;
}

#show_box_import{
    /* border: 1px solid blue; */
    top: 190px;
}

#updRegNum_box #user_id{
    cursor: not-allowed;
}

.up_down{
    cursor: pointer;
    margin-right: 5%;
}

#show, #hide{
    border: 1px solid rgb(8, 77, 34, .5);
    font-family: tahoma;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 7px;
    color: white;
    background-color: rgba(8, 238, 131, 0.685);
}

#hide{
    display: none;
}

#show_box ul{
    /* border: 1px solid blue; */
    margin: .5%;
    display: none;
    background-color: rgba(0, 0, 0, .3);
}

#show_box ul li{
    /* border: 1px solid red; */
    font-family: tahoma;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 10px;
    color: white;
    list-style: none;
    cursor: pointer;
    text-align: center;
}

#show_box ul li:hover{
    background-color: rgba(0, 0, 0, .5);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

#import_file{
    /* border: 1px solid blue; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
}

#import_file .inputBox{
    width: 100%;
    margin-bottom: 5%;
}

#import_file .inputBox select{
    width: 100%;
}

#import_file input[type="file"]{
    width: 70%;
    margin: 5% 11% 5%;
    background-color: lightgreen;
    cursor: pointer;
}

#import_file input[type="file"]:nth-child(1){
    margin-top: 10%;
}

#stamp .inputBox label{
    margin-left: 10%;
}


        /***** DEPARTMENT STATISTIC CODE *****/
#deptBox{
    /* border: 1px solid white; */
    height: inherit;
    display: none;
}

#all_deptView{
    /* border: 1px solid red; */
    padding: 3px;
    background: rgb(8, 77, 34, .5);
}

#inner_all_deptView{
    /* border: 1px solid green; */
    overflow-y: scroll;
    width: 100%;
    height: 550px;
}

#inner_all_deptView > p, #deptView_stat > p{
    color: white;
    text-align: center;
    margin-top: 10%;
    font-size: 20px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.inner_all_deptViewBox{
    /* border: 1px solid blue; */
    width: 33%;
    float: left;
}

.inner_all_deptViewBox:nth-child(1), .inner_all_deptViewBox:nth-child(4),
.inner_all_deptViewBox:nth-child(7), .inner_all_deptViewBox:nth-child(10){
    margin-left: .3%;
}

#deptViewBox{
    border: 1px solid lightgray;
    margin: 5px;
}

#inner_deptView{
    background: rgb(8, 77, 34, .5);
    height: 97%;
    overflow: auto;
    display: none;
}

#deptView{
    border: 1px solid white;
    border-radius: 15px;
    width: 60%;
    margin: 1% auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
    color: black;
    background: rgb(8, 77, 34, .5);
}

#inner_deptStat{
    display: flex;
}

#deptStat{
    width: 70%;
}

#bt{
    display: none;
}

.levStat{
    border-left: 2px solid white;
    padding: 3px;
    width: 28%;
    color: white;
}

.levStat h3{
    font-size: 18px;
    margin-top: 5%;
}

#levStat_box{
    width: 90%;
    margin: 10% auto;
}

#levStat_box p, #levStat_box span{
    font-size: 15px;
    font-weight: bold;
    font-family: tahoma;
    letter-spacing: 1px;
    /* text-shadow: 4px 4px 2px rgba(0, 0, 0, .7); */
    text-transform: uppercase;
}

#levStat_box p{
    margin: 10% 0;
}

#levStat_box span{
    margin-right: 15%;
}

#deptView hr{
    border: 2px solid white;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    width: 97%;
    margin: 1.5% auto 0;
}

.top_deptView{
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    margin: 4% 2% 3%;
    /* padding-left: 20px; */
}

.bottom_deptView{
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
    margin-bottom: 1%;
}

.inner_bottom_deptView{
    width: 70%;
}

#deptView h2, .inner_all_deptViewBox h2, .top_deptView p, .top_deptView h3, 
.inner_bottom_deptView p, .inner_bottom_deptView h3{
    font-size: 30px;
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 1%;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

.top_deptView p, .top_deptView h3, .inner_bottom_deptView h3, 
.inner_bottom_deptView p{
    font-size: 15px;
    letter-spacing: 1px;
}

.top_deptView h3{
    margin-bottom: 2%;
    text-align: left;
}

.inner_bottom_deptView h3{
    margin-bottom: 2%;
}

.top_deptView span, .inner_bottom_deptView span{
    font-size: 15px;
    letter-spacing: 1px;
    margin-left: 2%;
}

.grad_deptView{
    margin-top: 5%;
}

.grad{
    width: 100%;
}

.grad h3{
    margin-bottom: 5%;
}

.grad h3, .grad p{
    font-size: 13px;
}

.left_deptView p, .right_deptView p, .inner_bottom_deptView p{
    padding: 5px 0 5px 15px;
}

.left_deptView{
    /* border: 1px solid blue; */
    width: 48%;
    margin-left: 5%;
}

.right_deptView{
    /* border: 1px solid blue; */
    width: 45%;
    margin-left: 1%;
}

#left_deptView p, #right_deptView p{
    padding: 5px 0 5px 5px;
}

#left_deptView, #right_deptView{
    /* border: 1px solid blue; */
    width: 52%;
    margin-left: 1%;
}

#left_deptView{
    margin-left: 0;
}

#deptViewBox span, #deptView span{
    float: right;
}

.top_deptView span{
    margin-right: 10%;
}

.bottom_deptView span{
    margin-right: 20%;
}

#deptViewBox p, #deptViewBox span{
    font-size: 13px;
}


        /***** SESSION CODE *****/
#sessionBox{
    /* border: 1px solid red; */
    display: none;
    color: black;
}

.sessionView{
    border: 1px solid black;
    border-radius: 15px;
    width: 30%;
    margin: 8% auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

#session_view{
    display: none;
}

#sess_feedbck{
    width: 95%;
    margin-left: 2.5%;
    height: 90%;
    overflow-y: scroll;
}


    /********** STAFF REGISTRATION PAGE CODE **********/
.staffHead{
    margin-top: 1%;
}

#staff_logo, #student_logo{
    margin-left: 5%;
}

#staff_register, #student_register{
    /* border: 1px solid red; */
    margin-top: 1%;
}

.staffBox{
    /* border: 1px solid black; */
    margin: 0 .5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reg_FormInner{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row;
    width: 100%;
}
.reg_leftBox, .reg_rightBox{
    /* border: 1px solid green; */
    /* width: 100%; */
}
.reg_leftBox .inputBox select, .reg_leftBox .inputBox input,
.reg_rightBox .inputBox select, .reg_rightBox .inputBox input{
    /* border: 1px solid black; */
    border-radius: 10px;
    border: none;
    border-bottom: 1px solid gray;
    outline: none;
    padding: 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 90%;
    margin-left: 5%;
    color: gray;
}

.staffBox input[type="submit"]{
    padding: 10px 30px;
    border-radius: 15px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: 45%;
    text-align: center;
}

.left_top, .left_bottom, .right_top, .right_bottom{
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
}
.reg_leftBox .inputBox,.reg_rightBox .inputBox{
    /* border: 1px solid red; */
    margin: 4% 1% 5%;
    padding: 10px;
    width: 48%;
}






    /********** STUDENT PAGE CODE **********/
#receipt-upload, #verification, #status, 
#fresher-account, #sponsor{
    /* border: 1px solid red; */
    padding: 5px;
    display: none;
    color: black;
}

.receiptBox, .verifyBox, .confirm_status, .codeBox, .accRej{
    border: 1px solid white;
    border-radius: 15px;
    width: 30%;
    margin: 5% auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.drop-down{
    /* border: 1px solid red; */
    border-radius: 8px;
    width: 15%;
    position: absolute;
    top: 10;
    right: 20px;
    display: none;
    z-index: 1;
}

.drop-down ul{
    list-style: none;
}

.drop-down ul li{
    font-size: 18px;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    color: white;
}

.drop-down ul li a{
    text-decoration: none;
    color: white;
}

.drop-down ul li:hover{
    /* color: #fff; */
    background-color: rgba(0, 0, 0, .5);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.drop-down ul > ul{
    /* border: 1px solid black; */
    position: absolute;
    top: 0;
    right: 100%;
    width: 60%;
    display: none;
}

#fresh_box{
    padding: 7px;
}

#fresh_box h3, #session_view h3{
    margin-top: .5%;
    margin-left: 77%;
}

#freshDetails{
    color: black;
}

.accRej{
    border: 1px solid green;
    border: none;
    padding: 20px;
    width: 50%;
    margin: 10% auto;
    display: none;
}

#h-grad{
    margin-bottom: 17.8%;
}

#non{
    margin-bottom: 14%;
}

#h-non, #rejectBox{
    margin-bottom: 15.8%;
}

#completed{
    margin: 0 auto 3.1%;
    display: none;
}

.accRej > p{
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding: 10px;
}

.accRej a{
    text-shadow: none;
    color: #0ef;
}


    /***** RECEIPT UPLOAD CODE *****/
#receipt-upload{
    border: 1px solid white;
    height: inherit;
}

.receiptBox{
    margin: 2% auto;
}

.receiptBox .inputBox, .codeBox .inputBox{
    /* border: 1px solid red; */
    margin: 6% 0;
    padding-bottom: 10px;
}

.codeBox .inputBox{
    /* border: 1px solid red; */
    margin: 6% 0 8%;
    padding: 10px 0;
}

.receiptBox .inputBox select, .receiptBox .inputBox input, .codeBox .inputBox select{
    color: gray;
}

#r-radio, #c-radio{
    margin-left: 20%;
}

#r-label, .v-label{
    color: white;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
    margin-left: 20%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
}

.receipt-btn{
    font-size: 15px;
    margin: 5% 19%;
    font-weight: bold;
}

.receiptBox input[type="submit"], .confirm_status input[type="submit"],
.verifyBox input[type="submit"], .codeBox input[type="submit"]{
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    background-color: #03a9f4;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 0 39%;
    margin-bottom: 5%;
}

#fetchCode, #uploadCode{
    /* border: 1px solid red; */
    width: 29%;
    margin: 1% 0 5% 10%;
    color: gray;
    font-family: tahoma;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

#fetchCode:hover, #uploadCode:hover{
    color: green;
}

.codeBox{
    margin: 7% auto;
    display: none;
}


    /***** VERIFICATION CODE *****/
#verification{
    border: 1px solid white;
    height: 570px;
    background: rgb(8, 77, 34, .5);
}

.instruction{
    padding: 0 10px 10px;
    width: 60%;
    margin: 1% auto;
}

#require{
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    /* text-align: center; */
    color: white;
}

.instruction ul{
    /* border: 1px solid green; */
    list-style: none;
    margin: 1.5%;
}

.instruction ul li{
    border: 1px solid white;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    padding: 10px;
    font-size: 18px;
    color: white;
    letter-spacing: 1;;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.instruction ul li:nth-child(1){
    margin-left: 4%;
}

#instr{
    /* border: 1px solid red; */
    margin-top: 2%;
    font-size: 16px;
    letter-spacing: 1;
    font-family: tahoma;
    text-align: justify;
    white-space: wrap;
    word-spacing: 2px;
    margin-left: 5%;
    width: 94%;
    line-height: 30px;
    color: white;
}

#instr a{
    text-decoration: none;
    color: chartreuse;
}

.verifyBox{
    /* border: 1px solid white; */
    margin-top: 3%;
    margin-bottom: 7%;
}

.verifyBox .inputBox{
    /* border: 1px solid blue; */
    border-bottom: 1.5px dashed white;
    margin: 3% 0 4%
}

.verifyBox .inputBox:nth-child(1){
    border-top: 1.5px dashed white;
    margin-top: 4%;
    padding-top: 10px;
}

.verified .inputBox input[type="file"]{
    border: 1px solid black;
    border-radius: 10px;
    /* border: none; */
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 50%;
    margin-left: 21%;
    margin-bottom: 3%;
    cursor: pointer;
}

.verifyBox .inputBox > p{
    font-family: tahoma;
    font-size: 12px;
    color: white;
    font-weight: 700;
    margin-left: 20%;
}

.verify_btn{
    font-size: 15px;
    font-weight: bold;
    margin-top: 5%;
    /* margin: 5% 28%; */
}

.verifyBox input[type="submit"]{
    margin-top: 2%;
}


    /***** STATUS CODE *****/
#status{
    border: 1px solid green;
    height: inherit;
}

.confirm_status{
    margin: 10% auto;
}

.confirm_status .inputBox{
    /* border: 1px solid red; */
    margin: 6% 0 8%;
    padding: 10px 0;
}

    /***** ACCOUNT UPDATE CODE *****/
#account, #sponsor{
    border: 1px solid white;
    height: inherit;
}

.sponsorBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 30%;
    margin: 2% auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

.sponsorBox input[type="submit"]{
    background: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: bold;
    margin-left: 39%;
    margin-bottom: 2%;
    color: #fff;
    background: green;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
}

    /***** FRESHER ACCOUNT UPDATE CODE *****/
#fresher-account{
    /* border: 1px solid white; */
    height: inherit;
}

.fresherAccBox{
    border: 1px solid black;
    border-radius: 15px;
    width: 60%;
    margin: .5% auto;
    overflow-y: scroll;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .5);
}

#fresher_accUpdForm{
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 83%;
}

#de{
    display: none;
}

#leftBox{
    width: 45%;
    /* border: 1px solid red; */
    border-right: 1.5px dashed rgba(0,0,0, .8);
    margin: 1% 0 .5% 4%;
    padding: 10px 0;
}

#rightBox{
    /* border: 1px solid red; */
    width: 45%;
    border-left: 1.5px dashed rgba(0,0,0, .8);;
    margin: 1% 0 .5% 5%;
    padding: 10px 0;
}

#leftBox .inputBox, #rightBox .inputBox, .sponsorBox .inputBox{
    /* border: 1px solid red; */
    padding: 10px;
    margin: 0 0 7%;
}

#leftBox .inputBox input, #leftBox .inputBox select, 
#rightBox .inputBox input, #rightBox .inputBox select, .sponsorBox .inputBox select, 
.sponsorBox .inputBox input{
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: tahoma;
    border-radius: 10px;
    text-align: center;
    border: none;
    outline: none;
    border-bottom: 3px solid rgba(0, 0, 0, .5);
    margin-left: 10%;
    width: 80%;
    color: gray;
}

.fresherAccBox input[type="submit"]{
    background: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: bold;
    margin-left: 46%;
    margin-bottom: 2%;
    color: #fff;
    background: green;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
}


            /***** STUDENT VERIFICATION PAGE *****/
.validate-wrapper{
    border: 1px solid #084d2280;
    height: 100%;
}

.validate_box{
    /* border: 1px solid black; */
    width: 80%;
    height: 90%;
    margin: 0 auto;
}

#validateOutput{
    /* border: 1px solid black; */
    width: 90%;
    height: 100%;
    margin: 1% auto;
    overflow-y: scroll;
}

.validateResult{
    border: 1px solid black;
    width: 60%;
    height: 100%;
    margin: 0 auto .5%;
}

#valid_wrapper{
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 10px;
}

#right_val{
    margin-left: 1%;
}

.validateBox .inputBox{
    /* border: 1px solid red; */
    margin-top: 1%;
}

.validate_box .inputBox input{
    border: 1px solid green;
    border-radius: 9px;
    padding: 10px;
    width: 18%;
    text-align: center;
    font-family: tahoma;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1;
    color: white;
    background-color: green;
    margin-left: 8%;
    cursor: pointer;
}

.validate_box .inputBox input[type="submit"]{
    width: 10%;
}

#accept{
    margin-left: 35%;
}


        /********** EMAIL CONFIRMATION CODE **********/
.mail_val_cont{
    /*border: 1px solid red; */
    background: rgb(8, 77, 34, .5);
    width: 100%;
}

.mail_val_cont img{
    /* height: 645px; */
    height: 720px;
    width: 100%;
    opacity: .7;
}

#confirm_reg_body{
    border: 1px solid lightgray;
    width: 99%;
    margin: 0 auto;
    height: 555px;
    background: rgb(8, 77, 34, .5);
}

#thank_you_box{
    display: none;
}

#confirm_reg_body{
    border: 1px solid lightgray;
    padding: 3px;
}

#confirm_reg_box{
    /* border: 1px solid blue; */
    display: flex;
    justify-content: center;
    height: 564px;
}

#confirm_regBox{
    /* border: 1px solid green; */
    padding-top: 5%;
}

#confirm_regBox h2{
    /* border: 1px solid red; */
    font-size: 30px;
    font-family: tahoma;
    letter-spacing: 2px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    padding: 0 10px 8px;
    text-align: center;
}

#confirm_regBox p{
    font-family: tahoma;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
    color: white;
    font-size: 16px;
    line-height: 25px;
    margin-top: 3%;
}

#thank_you{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5% 0 3%;
}

#thank_you p{
    margin-top: 0;
}

#thank_you button{
    /*text-decoration: none;*/
    border: none;
    outline: none;
    font-family: tahoma;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 8%;
    color: green;
}

#confirm_regBtn_box{
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5% 0 3%;
}

#confirm_regBox button{
    border: 1px solid green;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 20px;
    font-family: sans-serif;
    letter-spacing: 2px;
    font-weight: bold;
    color: white;
    background-color: #008000;
    text-align: center; 
    cursor: pointer;
}

        /********** FORGET PASSWORD CODE **********/
.forgetPass, .verify_accessCode, .new_passwordBox, 
.adm_reg_code, .adm_reg_fac{
    border: 1px solid white;
    border-radius: 10px;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .7);
    width: 40%;
    margin: 2% auto;
    background: rgb(8, 77, 34, .5);
}

.forgetPass, .verify_accessCode{
    margin-top: 1%;
    margin-bottom: 2% ;
}

.new_passwordBox{
    margin-top: 1%;
    margin-bottom: 1%;
}

.closeForget{
    margin: 0 12% 0 0;
}

.adm_reg_fac{
    margin-top: 0;
}

.verify_accessCode, .new_passwordBox, .adm_reg_code{
    display: none;
}

.inner{
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}

#forget_form, #verify_form, #pass_form{
    width: 60%;
}

#v-mail, #v-fac, #n-mail, #n-fac{
    cursor: not-allowed;
}

.inner .inputBox{
    /* border: 1px solid red; */
    margin-bottom: 10%;
}

.inner .inputBox select{
    width: 100%;
}

#adm_reg_fac .inputBox{
    /* border: 1px solid red; */
    margin-bottom: 5%;
}

#adm_reg_fac .inputBox label{
    margin-left: 5%;
}

#adm_reg_fac .inputBox input, #adm_reg_fac .inputBox select{
    /* border: 1px solid black; */
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: center;
    width: 90%;
    margin: 2% 5%;
}

#adm_reg_fac .inputBox input{
    /* border: 1px solid red; */
    width: 80%;
}

.inner input[type="submit"]{
    margin: 2% 0;
}

#fac_submitBtn{
    margin-top: 2%;
}

#user_logBtn{
    border: 1px solid green;
    border-radius: 10px;
    padding: 10px 15px;
    font-family: tahoma;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: bold;
    color: white;
    background-color: green;
    text-decoration: none;
    display: none;
}

        /********** FEEDBACK MESSAGES **********/
#login_msg, #reg_msg, #addDel_msg, #remove_msg, #account_msg, #clr_account_msg, 
#dept_account_msg, #image_msg, #clr_image_msg, #dept_image_msg, #fee_msg, #status_msg, #fetch_msg, #get_msg,
#verify_msg, #receipt_msg, #get_receipt_box p, #code_msg, #confirm_msg, #acc_msg, 
#img_msg, #tab_msg, #student_msg, #check_fdback, #clear_fdback, #sponsor_msg,
#staff_msg, #sess_msg, #forget_fdback, #cont_msg, #forget_msg, 
#verifyCode_msg, #newPass_msg, #pdf_msg, #mail_msg, #fac_msg, #gen_msg,
#redirect, #import_msg, #first_msg, #updSess_msg, #updRegNum_msg, 
#dept_clr_fdback, #clr_secSta_msg, #adm_secSta_msg, #dept_secSta_msg, 
#clr_receipt_msg{
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: tahoma;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
}

#verify_msg{
    font-size: 15px;
}

#first_msg{
    margin-bottom: 10%;
}

#get_receipt_msg{
    display: none;
}


        /* KEYFRAME ANIMATION */
@keyframes slideRight{
    0%{
        transform: translateX(100px);
        opacity: 0;
    }

    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeft{
    0%{
        transform: translateX(-100px);
        opacity: 0;
    }

    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoomIn{
    0%{
        transform: scale(0);
        opacity: 0;
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes floatImage{
    0%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-24px);
    }

    100%{
        transform: translateY(0);
    }
}


        /********** FOOTER **********/
.footer{
    border: 1px solid black;
    border-left: none;
    border-right: none;
    background-color: rgba(0, 0, 0, .7);
    padding-top: 10px;
    padding-right: 20px;
    height: 30px;
    z-index: 1;
}

.footer p{
    color: white;
    text-shadow: 5px 5px 5px chartreuse;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 15px;
    text-align: right;
}