@media only screen and (max-width: 700px) {

    
    
}

@media only screen and (max-width: 768px) {
    .responsive{
        /* border: 1px solid red; */
        width: 49.99999%;
        /* width: 100%; */
        margin: 6px 0;
    }

#main_index_body{
    width: 90%;
}

#main_index_form{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    width: 100%;
}

#main_index_form .inputBox{
    width: 100%;
}

#main_index_form .inputBox > p{
    font-size: 18px;
    text-align: left;
    margin-left: 10%;
}

#main_index_form .inputBox select{
    width: 80%;
    margin: 5% 10%;
}

#main_index_form input[type="submit"]{
    margin-top: 47%;
}

.index_lodge{
    /* border: 1px solid red; */
    width: 49.8%;
}

/* .index_lodge img{
    border: 1px solid black;
    width: 100%;
    height: 95%;
} */

#indexLodgeBox p{
    font-size: 20px;
}

#index_lodge_box{
    display: block;
    margin-bottom: 2%;
    overflow: auto;
}

.index_lodge{
    float: left;
    height: 40%;
}

    /****** WORKER PAGE CODE ******/
#work_box{
    /* border: 1px solid blue; */
    width: 80%;
}

#work_form_box{
    /* border: 1px solid red; */
    display: block;
    box-shadow: 5px 5px 4px rgba(0, 0, 0, .7);
    border-bottom-right-radius: 15px;
    padding-bottom: 5px;
}

#left_formBox, #right_formBox{
    /* border: 1px solid red; */
    border-bottom-right-radius: 0;
    box-shadow: none;
}

#right_formBox{
    /* border: 1px solid red; */
    margin-top: 3%;
    margin-left: 0;
}


    /******************* INDEX NAV CODE *******************/
    #header{
        height: 125px;
    }

    #admin_header{
        /* height: 107px; */
    }

    .index_nav{
        display: block;
    }

    .left_nav{
        display: none;
    }

    .right_nav{
        width: 100%;
    }

    .admin_nav{
        margin-top: 3%;
    }

    .admin_nav ul li{
        font-size: 15px;
    }

    #message_list, #set_sublist{
        top: 121;
    }

    /***** STATISTIC *****/
    #stat_wrapper h2{
        /* margin-top: 5%; */
    }

    #statBox{
        /* border: 1px solid red; */
        width: 100%;
        margin: 0 0 17.5%;
    }

    #inst_stat, #stud_stat, #otherStat{
        width: 60%;
        margin: 0 auto;
        /* float: none; */
        box-shadow: none;
    }

    #inst_stat{
        margin-right: .5%;
    }

    #otherStat{
        margin-left: .5%;
    }

    #inst_stat p, #stud_stat p, #otherStat p{
        padding-left: 15px;
        font-size: 20px;
    }

    .stat_tally ul{
        /* border: 1px solid red; */
        margin-left: 0;
        width: 100%;
    }

    .stat_tally ul li{
        /* border: 1px solid red; */
        font-size: 12px;
        padding: 7px;
    }

    .span{
        display: none;
    }

    #per_inst_stat{
        /* margin-top: 5%; */
    }

    #lower_statBox{
        /* margin-top: 10%; */
    }

    #per_inst_stat{
        margin-top: 30%;
        margin-bottom: 0;
    }

    #per_inst_stat .inputBox{
        width: 70%;
        /* margin: 0 5%; */
    }

    #inst_submit_div{
        margin: 7% 0 .1%;
    }

    #report_wrapper{
        height: 516px;
        overflow: auto;
    }

    #report_table{
        width: 100%;
        overflow: auto;
    }

    #inner_table{
        margin-right: 3%;
    }

    .index_side_nav{
        display: none;
    }

    /********************* LOGIN CODE *********************/
    #log_wrapper, #adm_log_wrapper{
        width: 90%;
    }

    #login_list ul li{
        font-size: 12px;
        letter-spacing: 3px;
        line-height: 20px;
    }

        /***** FORGET PASSWORD OVERLAY *****/
    #forget_body{
        height: 515px;
    }

    .forgetBox{
        width: 80%;
        margin: 10% auto;
    }

    /********************* REGISTER CODE *********************/
    #reg_box{
        /* border: 1px solid red; */
        width: 90%;
        margin-top: 4%;
    }

    #reg_leftRight{
        display: block;
    }

    #left_reg{
        width: 90%;
        margin: 0 auto;
    }
    
    #right_reg{
        width: 90%;
        margin: 0 auto;
    }

    /********************* ABOUT US CODE *********************/
    .about_page, #contact_page{
        width: 95%;
        margin: 0 auto;
    }

    .inner_aboutBody{
        display: block;
        margin-bottom: 2%;
    }

    .inner_aboutBody a{
        margin-bottom: 1%;
    }

    .first_item, .second_item, .third_item{
        width: 80%;
        margin: 4% auto;
    }

    .main_page_item{
        width: 100%;
    }

    #inner_aboutBody{
        margin-top: 8%;
    }

    #contact_us{
        border: none;
        box-shadow: none;
    }

    #contact{
        margin-left: 0;
    }

    /********************* CONTACT US CODE *********************/
    #contact_box{
        display: block;
    }

    #contactBox{
        width: 80%;
        margin: 1% auto 2%;
    }

    #contact_us{
        width: 80%;
        height: 160px;
        margin: 10% auto 4%;
    }

    #reportBox{
        width: 80%;
    }

    #work_report_box{
        /* border: 1px solid red; */
        width: 100%;
    }

    #work_report_box .inputBox input{
        width: 70%;
        margin: 5% 15%;
    }

    /******************* AGENT CODE *******************/
    #stud_lists{
        /* border: 1px solid red; */
        position: absolute;
        top: 120;
        left: 340;
        border-radius: 5px;
        background-color: green;
        display: none;
    }

    #buy_search_body{
        width: 80%;
        margin: 2% 0 3% 15%;
    }

    #buy_search_form .inputBox{
        margin-right: 10%;
    }

    #buy_search_form .inputBox select{
        padding: 5px;
        width: 100%;
    }

    #buy_search_form input[type="submit"]{
        padding: 3;
        /* margin-top: 7%; */
    }

    #stud_lists li{
        border: 1px solid red;
        border: none;
        border-radius: 0;
        font-weight: bold;
        display: block;
        text-align: center;
        width: 100%;
    }

    #stud_lists li{
        border-bottom: 1px solid white;
    }

    #stud_lists li:nth-child(2){
        margin-bottom: 2%;
    }

    #uploadBox{
        /* border: 1px solid red; */
        width: 100%;
    }

    #inner_lodge .inputBox span{
        font-size: 13px;
    }

    .welcome{
        margin: 8% 0 10%;
    } 

    .wel_box > ul{
        margin: 2% 4%;
    }

    .wel_box ul li{
        font-size: 13px;
        margin-top: 5%;
    }

    .wel_box ul li:nth-child(1){
        margin-top: 5%;
    }

    .wel_box ul .li{
        letter-spacing: 3px;
        text-align: justify;
        line-height: 20px;
    }

    #wel_box{
        height: 448px;
        margin-top: 8%;
    }

    #exp{
        width: 80%;
    }

    .stud_responsive, .adm_order_res, .sub_order_res{
        border: 1px solid red;
        width: 50%;
        margin: 6px 0;
    }

    .stud_responsive{
        border: 1px solid red;
        width: 100%;
    }

    /******************* ADMIN CODE *******************/
    .adm_order_res, .sub_order_res{
        width: 100%;
    }

    #sub_order_wrapper, #sub_adm_sett_wrapper{
        height: 474px;
    }

    #sub_report_wrapper, #sub_contact_wrapper{
        height: 464px;
    }

    #adm_contactBox, #adm_reportBox, #sub_contactBox, #sub_reportBox{
        border-top: 1px solid gray;
        margin-bottom: 3%;
        width: 95%;
    }

    /********** ADD/DROP PAGE **********/
    #add_drop_box{
        display: block;
    } 

    #add_wrapper, #drop_wrapper, #sub_drop_wrapper{
        border: 1px solid lightgray;
        width: 100%;
    }

    #add_wrapper{
        margin-left: 0;
    }

    #addBox{
        margin-top: 5%;
    }

    #add_left, #add_right{
        width: 50%;
        margin-left: 1%;
    }

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

    #addBox .inputBox input, #addBox .inputBox select{
        width: 90%;
        margin-left: 5%;
    }

    #drop_wrapper{
        margin-top: 5%;
    }

    #sub_drop_wrapper{
        height: 474px;
    }

    #sub_dropWrapper{
        width: 90%;
        margin-left: 5%;
    }

    #drop_box, #sub_drop_box{
        margin-top: 15%;
        margin-bottom: 10%;
    }

            /***** REPLY CODE *****/
    .adm_msg_reply, .attach_box{
        width: 95%;
        top: 200;
        left: 10;
    }

    .inner_msg_reply{
        width: 90%;
        margin-bottom: 10%;
    }

    #lodgeSearch_box{
        width: 80%;
    }

    .stud_lodge_res{
        width: 50%;
        margin: 6px 0;
    }

    .stud_placeOrder{
        width: 100%;
        top: 350;
        left: 0;
    }

    #order_placed{
        width: 70%;
        top: 350;
        left: 100;
    }

    .stud_goBack{
        width: 10%;
    }

    .lodge_otherView_res, .stud_placeOrder_res{
        background-color: white;
        width: 70%;
        margin: 6px auto 6%;
    }

    .stud_placeOrder_res{
        width: 99%;
        margin: 0 auto;
    }

    .stud_otherView, .stud_placeOrder{
        border: 1px solid red;
        background-color: rgba(0, 0, 0, .2);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .stud_placeOrder{
        top: 150;
    }

    .buy_sell_box fieldset:nth-child(2), .buy_sell_box fieldset:nth-child(3){
        margin-top: 5%;
    }

    .buySell_box{
        height: 20%;
    }

    #placed{
        /* border: 1px solid red; */
        width: 30%;
        margin: 3% auto;
    }

    .set_box{
        border: none;
        width: 80%;
        margin: 5% 3% 7.3%;
    }

    #inner_lodge{
        display: block;
        margin: 0 auto;
    }

    #left_upload, #right_upload{
        margin: 0 auto;
        width: 70%;
    }

    #innerLodge input[type="submit"]{
        margin: 5% 37% 8%;
    }

    #upload_wrapper{
        height: 580px;
    }

    #upload_wrapper a{
        margin-top: 20%;
        margin-left: 28%;
    }

    #hideView{
        width: 10%;
        margin-top: 2%;
        margin-left: 90%;
        margin-bottom: 2%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .index_lodge{
        /* border: 1px solid red; */
        width: 49.8%;
    }

    .stat_tally ul{
        /* border: 1px solid red; */
        margin-left: 0;
        width: 100%;
    }

    .stat_tally ul li{
        /* border: 1px solid red; */
        font-size: 14px;
        padding: 7px;
    }

    .span{
        /* display: none; */
    }

    .stud_responsive{
        border: 1px solid green;
        width: 50%;
    }

    .adm_order_res, .sub_order_res{
        width: 50%;
    } 

    #adm_contactBox, #adm_reportBox{
        width: 49%;
    }

    #forget_body{
        height: 515px;
    }

    .forgetBox{
        width: 60%;
        margin: 7% auto;
    }

    .index_nav{
        display: block;
    }

    .left_nav{
        display: none;
    }

    .right_nav{
        border: 1px solid red;
        width: 100%;
    }

    .stud_placeOrder{
        width: 100%;
        top: 130;
        left: 0;
    }

    .stud_placeOrder_res{
        width: 80%;
        margin: 0 auto;
    }

    #placed{
        margin-top: 2%;
    }
}

@media (min-width: 1025px) and (max-width: 1400px) {
    /******************* ADMIN CODE *******************/
    .stat_tally ul{
        /* border: 1px solid red; */
        margin-left: 0;
        width: 100%;
    }

    .stat_tally ul li{
        /* border: 1px solid black; */
        font-size: 14px;
        padding: 7px;
    }

    #forget_body{
        height: 510px;
    }

    .forgetBox{
        width: 40%;
        margin: 3% auto;
    }

    .stud_responsive{
        border: 1px solid red;
        width: 50%;
    }

    .stud_placeOrder{
        width: 70%;
        top: 110;
        left: 250;
    }

    .stud_placeOrder_res{
        width: 80%;
        margin: 0 auto;
    }

    #placed{
        margin-top: 2%;
    }
}

@media only screen and (max-width: 425px) {
.selfcon_box{
    border: 1px solid blue;
}

.stud_responsive, .stud_lodge_res{
    border: 1px solid blue;
    padding: 0 6px;
    float: none;
    width: 100%;
    margin-bottom: 3%;
} 
  
.stud_otherView{
    /* left: 0;
    width: 100%; */
}

    /************ Agent Code ************/
#left_upload, #right_upload{
    margin: 0 auto;
    width: 85%;
}

#lodgeSearch_box{
        width: 80%;
    }

.stud_placeOrder_res{
    width: 90%;
}

.stud_placeOrder, #order_placed{
    width: 100%;
    top: 250;
    left: 0;
}

}