/*This stylesheet is for mobile phones*/

/*Media query for mobile phone (iphone)*/
@media only screen
and (max-width : 480px) {

    #header { width: 90%; float: right; }
    #header_wrapper, #container, #footer, #body { width: 95%; padding: 0; margin: 0; }
    #header_wrapper { margin-bottom: 20px; display: block; }
    #header_img { position: absolute; right: 0px; top: 65px; }
    #form_display { width: 60%; }
    .global_warning { width: 80%; clear: both; }
    #status { width: 30%; }
    #nav_align { width: 105%; text-align: left; margin: 40px 0 320px 0; float: left; position: relative; left: -30px; }
    #nav_align a { text-decoration: none; font-size: 16px; color: #fff; background: #333; padding: 7px; border-bottom: 2px solid #d3d3d3; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
    #nav_align a.current_page { background: #900; }
    #nav_align ul li { display: block; width: 100%; font-size: 12px; line-height: 16px; padding: 0; }
    #nav_align ul li:not(:last-child) { border-right: none; }
    h1#main_h1 { display: none; }
    h1#mobile_h1 { display: block; position: relative; top: 110px; font-size: 20px; }
    h3 { font-size: 16px; }
    h4 { font-size: 16px; }
    #footer { height: auto; margin:  10px 0 0 0; }
    #footer ul li { padding: 10px; }
    p { font-size: 14px; }
    #container { margin: 10px 0 10px 10px;  }
    img { max-width: 250px; height: auto; }
    label { text-align: left; width: auto; }
    #gcls { position: absolute; background: rgba(0,178,45, 0.95);; font-size: 18px; width: 80%; color: #fff; padding: 20px; top: 10px; left: 10px; z-index: 10; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

    .modal {
        position: fixed;
        top: 3%;
        right: 3%;
        left: 3%;
        width: auto;
        margin: 0;
    }
    .modal-body {
        height: 60%;
    }

    /*************** Make Data Tables Responsive ************************/
    /* Force table to not be like tables anymore */
    .table_flipped table, .table_flipped thead, .table_flipped tbody, .table_flipped th, .table_flipped td, .table_flipped tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table_flipped thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /*.table_flipped tr { border: 1px solid #ccc; }*/

    .table_flipped td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 35%;
    }

    .table_flipped td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 8px;
        left: 6px;
        width: 30%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }
    table.table_flipped td:before { content: attr(data-label); }

    /* Header */
    .table_flipped td:nth-of-type(1) { background: #900; color: #fff; font-size: 16px; font-weight: bold; }

    .table_flipped td select { width: 100%; font-size: 16px; }
    /*************** Make Data Tables Responsive ************************/

    /*Profile page*/
    #left_side, #right_side, .right, .left { width: 91%; }
    #left_side, #right_side { float: left; padding: 0; margin: 0; }
    .left, .right { float: left; margin-right: 0; }
    #phone_list_link { display: none; }
    .pin_left, .pin_right { position: absolute; top: -28px; left: 160px; }

    /*Messaging System*/
    .messaging-link-container { margin: 5px; }
    .left-link-container { margin-left: 0; }
    #side-bar, #message_wrapper { width: 95%; height: auto; margin: 20px 0; }
    #compose, #subject, #message_body, #status_message { width: 100%; }
    .category { width: 80%; height: auto; }
    .category select { width: 100%; }
    #subject input, #message_body textarea { width: 90%; }
    #message_body textarea { height: 100px; }

    /* Settings */
    #body h2 { font-size: 18px; text-align: left; margin: 2em 0 -30px 0px; z-index: 5; position: relative; line-height: 100px; }
    label, #text_msg_lbl, #sms_msg_lbl { display: block; width: 100%; margin-bottom: 10px; }
    select { background: #000; color: #fff; }

    /* My Availability */
    #postit, #availability_arrow { display: none; }
    #saturday_reminder {display: block; }
    #availability_header { width: 100%; font-size: 14px; }
    #availability_table { width: 95%; padding: 5px; }
    #text, #confirmed_text { width: 100%; }
    #confirmed_text { padding-bottom: 20px; }
    #help { font-size: 12px; }
    #confirmed_img { position: absolute; top: -3px; right: -10px; z-index: 10; }
    #help_text { width: auto; left: 10px; background: #ccc; color: #000; border: 2px solid #000; }
    #day_title, #start_title, #end_title , #available_title, #not_available_title { display: none; }
    .sat_row_day { margin-top: 30px; }
    .row_day { width: 90%; border-bottom: none; padding-bottom: 0; padding-top:  0; text-align: left; }
    .row_start, .row_end { width: 30%; padding: 0 0 30px 0; line-height: 12px; }
    .row_start select, .row_end select { font-size: 10px; margin-top: 20px; padding: 0; margin-left: 0; margin-right: 0; }
    .row_avail, .row_not_avail { width: 20%; padding: 0 0 30px 0; line-height: 12px; }
    .row_start span, .row_end span, .row_avail span, .row_not_avail span { display: inline; font-size: 12px; }
    #sat_avail_hide, #sat_not_avail_hide, #sun_avail_hide, #sun_not_avail_hide, #mon_avail_hide, #mon_not_avail_hide, #tue_avail_hide, #tue_not_avail_hide, #wed_avail_hide, #wed_not_avail_hide, #thu_avail_hide, #thu_not_avail_hide, #fri_avail_hide, #fri_not_avail_hide
    {left: 10px; font-size: 11px; width: 56%; }
    #sun_avail_hide, #sun_not_avail_hide { top: 208px; }
    #mon_avail_hide, #mon_not_avail_hide { top: 320px; }
    #tue_avail_hide, #tue_not_avail_hide { top: 432px; }
    #wed_avail_hide, #wed_not_avail_hide { top: 544px; }
    #thu_avail_hide, #thu_not_avail_hide { top: 656px; }
    #fri_avail_hide, #fri_not_avail_hide { top: 768px; }

    /* Availability History */
    #avail_change_reason_input { width: 100%; background: #eee; }

    /* My Schedule */
    #desktop_schedule { display: none; }
    .mobile_schedule { display: table; }
    #info_container { min-height: 0; width: 100%; }
    .info_button_text { display: block; }
    #scheduled_emps td:nth-of-type(1) { background: #900; color: #000; font-size: 16px; font-weight: bold; }
    td.cell { font-size: 16px; }

    /* Report Hours */
    #notes_arrow { display: none; }

    /* Report My Hours */
    .shift_label { width: 35%; }
    .shift_content { width: 55%; }

    /* Schedule Individual Page */
    #wrapper { width: 95%; }
    #schedule, #title_side { display: none; }
    #mobile { display: block; width: 100%; }
    #emp_list { height: 200px; }
    #new_vehicle_pickup, #new_notes { width: 100%; }
    .emp_row { line-height: 15px; min-height: 30px; }
    #loading { margin: 0; }

    #submit_emp, #legend, #new_color { float: left; }

    #emp_list::-webkit-scrollbar { width: 50px; }
    #emp_list::-webkit-scrollbar-track { background: #c5ccd4; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
    #emp_list::-webkit-scrollbar-thumb { background: #900; }

    #title_unassign { width: 30px; }
    #title_main { font-size: 12px; width: 250px; }

    .emp_column { font-size: 10px; }

    .emp_column_name { width: 70px; padding: 3px; min-height: 30px; }
    .emp_column_avail { width: 58px; padding: 3px; min-height: 30px; }
    .emp_column_exp { display: none; }
    .emp_column_dist { width: 30px; padding: 3px; min-height: 30px; }
    .emp_column_city { display: none; }
    .emp_column_hours { display: none; }
    .emp_column_type { display: none; }
    .emp_column_time { width: 58px; padding: 3px; min-height: 30px; }

    #avail_history_block { height: 120px; }
    #main { width: 95%; }
    #side_bar { width: 95%; }
    .header_list { font-size: 12px; }
    #toggle_week { display: block; width: 100%; font-size: 20px; }
    #scheduleHours { display: block; width: 100%; text-align: left; float: left; color: blue; }
    #equipment_div { display: block; width: 100%; font-size: 18px; font-weight: bold; }

    /* Equipment Check */
    #form_equipment p { margin-top: 30px; }
    #form_equipment label { display: inline-block; width: auto; }
    #form_equipment textarea { width: 90%; }

    /* Forgot Password */
    #forgot_password_img, #forgot_password_form { width: 88%; }

}

/* portrait */
@media screen and (orientation:portrait) {
    /* portrait-specific styles */
}
/* landscape mobile */
@media screen and (orientation:landscape) and (max-width : 480px) {
    .emp_column_exp { display: block; width: 30px; padding: 3px; min-height: 30px; }
    .emp_column_hours { display: block; width: 36px; padding: 3px; min-height: 30px; }
    .emp_column_type { display: block; width: 60px; padding: 3px; min-height: 30px; }
}

/*Media query for tablet (ipad)*/
@media only screen
and (min-width : 481px)
and (max-width : 1000px) {

    #header { width: 90%; float: right; }
    #header_wrapper, #container, #footer, #body { width: 92%; padding: 0; margin: 0 auto; position: relative; }
    #header_wrapper { margin-bottom: 20px; display: block; }
    #form_display { width: 100%; position: absolute; }
    #remember_me { position: absolute; top: 54px; right: 0; }
    #status { width: 50%; top: 20px; }
    #nav_align { width: 92%; text-align: left; float: left; position: absolute; left: 70px; top: 60px; }
    #nav_align a { text-decoration: none; color: #fff; background: #333; padding: 8px 4px; border-bottom: 2px solid #d3d3d3; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
    #nav_align a.current_page { background: #900; }
    #nav_align ul li { display: block; width: auto; font-size: 11px; line-height: 13px; padding: 0 1px; }
    #nav_align ul li:not(:last-child) { border-right: none; }
    #footer { height: auto; margin: 10px 10px 0 10px; }
    #footer ul li { padding: 10px; }
    #container { margin-top: 10px; padding: 0 20px; clear: both; position: relative; }
    img { max-width: 450px; height: auto; }

    .bubble_list { display: inline-block; background: #333; color: #fff; font-size: 14px; padding: 5px; margin: 2px 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

    /* Index / Login Page */
    .box { width: 42%; padding: 10px; height: auto; }
    #copyright { margin: 10px 0 0 0; font-size: 12px; }
    h1 { width: auto; }
    p { font-size: 12px; }

    /*Profile page*/
    #left_side, #right_side, .right, .left { width: 95%; }
    #left_side, #right_side { float: left; padding: 0; margin: 0; }
    .left, .right { float: left; margin-right: 0; }
    #phone_list, #phone_list_link { display: none; }
    .pin_left, .pin_right { position: absolute; top: -28px; left: 160px; }
    .content img { display: inline; float: left; margin-right: 10px; }

    /*Messaging System*/
    .messaging-link-container { margin: 5px; }
    #side-bar, #message_wrapper { width: 100%; height: auto; margin: 20px 0; }
    #compose, #subject, #message_body, #status_message { width: 100%; }
    .category { width: auto; height: auto; }
    .category select { width: 100%; }
    #subject input, #message_body textarea { width: 90%; }
    #message_body textarea { height: 100px; }

    /* My Availability */
    #postit, #availability_arrow { display: none; }
    #saturday_reminder {display: block; }
    #availability_header { width: 100%; font-size: 14px; }
    #availability_table { width: 95%; padding: 5px; }
    #text, #confirmed_text { width: 100%; font-size: 14px; }
    #confirmed_text { padding-bottom: 20px; }
    #help { font-size: 12px; }
    #confirmed_img { position: absolute; top: -3px; right: -10px; z-index: 10; }
    #help_text { width: auto; left: 10px; background: #ccc; color: #000; border: 2px solid #000; }
    #day_title, #start_title, #end_title , #available_title, #not_available_title { display: none; }
    .sat_row_day { margin-top: 30px; }
    .row_day { width: 90%; border-bottom: none; padding-bottom: 0; padding-top:  0; text-align: left; }
    .row_start, .row_end { width: 30%; padding: 0 0 30px 0; line-height: 12px; }
    .row_start select, .row_end select { font-size: 10px; margin-top: 20px; padding: 0; margin-left: 0; margin-right: 0; }
    .row_avail, .row_not_avail { width: 20%; padding: 0 0 30px 0; line-height: 12px; }
    .row_start span, .row_end span, .row_avail span, .row_not_avail span { display: inline; font-size: 12px; }
    #sat_avail_hide, #sat_not_avail_hide, #sun_avail_hide, #sun_not_avail_hide, #mon_avail_hide, #mon_not_avail_hide, #tue_avail_hide, #tue_not_avail_hide, #wed_avail_hide, #wed_not_avail_hide, #thu_avail_hide, #thu_not_avail_hide, #fri_avail_hide, #fri_not_avail_hide
    {left: 10px; font-size: 16px; width: 56%; }
    #sun_avail_hide, #sun_not_avail_hide { top: 208px; }
    #mon_avail_hide, #mon_not_avail_hide { top: 320px; }
    #tue_avail_hide, #tue_not_avail_hide { top: 432px; }
    #wed_avail_hide, #wed_not_avail_hide { top: 544px; }
    #thu_avail_hide, #thu_not_avail_hide { top: 656px; }
    #fri_avail_hide, #fri_not_avail_hide { top: 768px; }

    /* Report My Hours */
    .shift_label { width: 20%; }
    .shift_content { width: 70%; }

    /* Schedule Individual Page */
    #wrapper { width: 99%; }
    #emp_list { height: 300px; }
    #schedule, #title_side { display: none; }
    #mobile { display: block; width: 100%; }
    .emp_row { line-height: 15px; min-height: 30px; }
    #emp_list::-webkit-scrollbar { width: 70px; }
    #emp_list::-webkit-scrollbar-track { background: #c5ccd4; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
    #emp_list::-webkit-scrollbar-thumb { background: #900; }

    .emp_column_name { width: 105px; padding: 3px; min-height: 30px; }
    .emp_column_avail { width: 80px; padding: 3px; min-height: 30px; }
    .emp_column_exp { width: 35px; padding: 3px; min-height: 30px; }
    .emp_column_dist { width: 35px; padding: 3px; min-height: 30px; }
    .emp_column_city { width: 110px; padding: 3px; min-height: 30px; }
    .emp_column_hours { width: 80px; padding: 3px; min-height: 30px; }
    .emp_column_type { width: 80px; padding: 3px; min-height: 30px; }
    .emp_column_time { width: 80px; padding: 3px; min-height: 30px; }
    #avail_history_block { height: 120px; }
    #main { width: 60%; }
    #side_bar { width: 30%; }
    .header_list { font-size: 12px; }
    #toggle_week { font-size: 20px; width: 25%; }
    #scheduleHours { width: 17%; margin-right: 20px; text-align: right; color: blue; }
    #equipment_div { width: 38%; font-size: 18px; font-weight: bold; }

}

/* landscape tablet */
@media screen and (orientation:landscape) and (min-width : 481px) and (max-width : 1050px) {
    #wrapper { width: 99%; }
    #emp_list { height: 300px; }
    #title_side { display: none; }
    .emp_row { line-height: 15px; min-height: 30px; }
    .emp_column_name { width: 145px; padding: 3px; min-height: 30px; }
    .emp_column_avail { width: 145px; padding: 3px; min-height: 30px; }
    .emp_column_exp { width: 45px; padding: 3px; min-height: 30px; }
    .emp_column_dist { width: 45px; padding: 3px; min-height: 30px; }
    .emp_column_city { width: 120px; padding: 3px; min-height: 30px; }
    .emp_column_hours { width: 110px; padding: 3px; min-height: 30px; }
    .emp_column_type { width: 90px; padding: 3px; min-height: 30px; }
    .emp_column_time { width: 145px; padding: 3px; min-height: 30px; }

    #emp_list::-webkit-scrollbar { width: 70px; }
    #emp_list::-webkit-scrollbar-track { background: #c5ccd4; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
    #emp_list::-webkit-scrollbar-thumb { background: #900; }

}