/* Main Stylesheet for Signage Me Up

Author: Will Anderson
Author Website: https://www.willandersondesign.com
*/
 
/* Font 

font-family: 'Montserrat', sans-serif;

Weights:
-----------------
Regular 400
Medium 500
Semi-bold 600
Bold 700

*/

html, body{ margin: 0; padding: 0; font-size: 100%; font-family: 'Montserrat', sans-serif;}

body.inside{ max-height: 100vh; overflow: hidden;}

/* General */
.flex{ display: flex;}
.flex.center_valign{ align-items: center;}

.wrapper{ margin: 0 auto; max-width: 90%;}

.content_padding{ padding: 1rem;}

.centered{ text-align: center;}

svg{ vertical-align: middle;}

/* Font Styles */
h1{ font-size: 3.75rem; font-weight: 700;}
h2{ font-size: 3.125rem; font-weight: 600;}
h3{ font-size: 2.8125rem; font-weight: 700;}
h4{ font-size: 1.875rem; font-weight: 700;}
h5{ font-size: 1.75rem; font-weight: 700;}
h6{ font-size: 1.25rem; font-weight: 700;}

h6.p_heading{ font-size: 1rem;}
h6.panel_title{ border-bottom: solid 1px var(--darker-grey); padding: 0 0 1rem 0; margin-bottom: 1.5rem;}

.section_heading{ font-size: 1.125rem; font-weight: 700; padding-bottom: 2rem;}

h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0;}

p{ font-size: 0.875rem; color: #000; line-height: 150%;}
p.large{ font-size: 1.5rem; font-weight: 500;}
a{ text-decoration: none; color: #000;}

a.text_link{ color: var(--blue); font-weight: 700;}

ul, ol{ font-size: 0.875rem; color: #000; line-height: 150%;}
p.list_title{ margin-bottom: 0;}

span.capitalize{ text-transform: capitalize;}

/* Variables */
:root {
  --blue: #00A1ED;
  --pink: #E0067A;
  --yellow: #FFEF3E;
  --black: #000000;
  --grey: #E5E5E5; /* used for background, shadows, sub headings, etc */
  --light-grey: #EFEFEF; /* used for job column bg */
  --darker-grey: #B4B4B4; /* used for button border, etc. */
  --secondary-green: #48C364; /* bidding stage color */
  --secondary-orange: #EA932D; /* in progress color */
  --secondary-purple: #9051D9; /* complete status color */
  --secondary-teal: #48C3BE; /* needs confirmation color */
  --dark-grey: #848484;
  --red: #D95151;
  
  --border-radius-large: 28px; /* large border raduius */
}

/* Color Classes */
.blue_color{ color: var(--blue);}
.pink_color{ color: var(--pink);}
.yellow_color{ color: var(--yellow);}
.grey_color{ color: var(--darker-grey);}

.grey_text {color: var(--dark-grey);}

.error{ color: var(--red); font-weight: 700;}

/* Buttons */
.button{ border-radius: 25px; padding: 0.5rem 1rem; display: inline-flex; align-items: center; transition: all 0.3s; font-size: 1rem; color: var(--black); font-weight: 500; border: solid; transition: all 0.3s;}
.button_small_text{ display: block; font-size: 0.75rem; color: var(--blue); font-weight: 700;}

.button.block{ display: block; margin: 1rem 0;}

.button.centered{ justify-content: center;}

.button.blue_button{ background-color: var(--blue); color: #fff; border-color: var(--blue);}
.button.blue_button:hover{ background-color: var(--darker-grey); border-color: var(--darker-grey);}

.button.pink_button{ background-color: var(--pink); color: #fff; border-color: var(--pink);}
.button.pink_button:hover{ background-color: var(--darker-grey); border-color: var(--darker-grey);}

.button.black_button{ background-color: #000; color: #fff; border-color: #000;}
.button.black_button:hover{ background-color: var(--grey); border-color: var(--grey); color: #000;}

.button.yellow_button{ background-color: var(--yellow); color: #000; border-color: var(--yellow);}
.button.yellow_button:hover{ background-color: var(--grey); border-color: var(--grey); color: #000;}

.button.white_button{ background-color: #ffffff; color: var(--blue); border-color: var(--blue);}
.button.white_button:hover{ background-color: #000000; border-color: #000; color: #ffffff;}


* + .inline_button_container{ margin-top: 1rem;}
.inline_button_container .button + .button{ margin-left: 1rem;}
.inline_button_container.centered{ justify-content: center;}

/* Header Design Bar */
.header_design_bar{ margin: 0 auto; width: 100%;}
.top_black_bar{ width: 100%; background-color: #000; height: 44px; display: flex; align-items: center; justify-content: flex-end;}
.color_bar_part{ width: 33.333333%; height: 11px;}
.color_bar_part.blue_bar{ background-color: var(--blue);}
.color_bar_part.pink_bar{ background-color: var(--pink);}
.color_bar_part.yellow_bar{ background-color: var(--yellow);}

.logout_button{ appearance: none; background: none; border: none; color: #fff; margin-right: 1rem; }

/* Footer Design Bar */
.footer_design_bar{ margin: 0 auto; width: 100%;}
.color_bar_part{ width: 33.333333%; height: 11px;}
.color_bar_part.blue_bar{ background-color: var(--blue);}
.color_bar_part.pink_bar{ background-color: var(--pink);}
.color_bar_part.yellow_bar{ background-color: var(--yellow);}

/* Sidebar */
#sidebar{ width: 312px; background-color: #fff; border-radius: var(--border-radius-large); box-shadow: 0 3px 12px rgba(0,0,0,0.16); /* margin: 1rem 0 1rem 1rem; */ min-height: calc(100vh - 55px - 2rem); display: inline-flex; /* height: 100%; */ position: fixed; top: calc(55px + 1rem); left: 1rem; z-index: 1001; transition: all 0.3s;}
#sidebar > .content_padding{ padding: 2rem 1.5rem; display: flex; justify-content: center; width: 100%;}
#sidebar > .content_padding > .flex{ flex-direction: column; justify-content: space-between; align-items: center; width: 100%;}
#logo{ margin: 0 auto 1.5rem auto; text-align: center; }

.user_buttons{ width: 100%;}
.user_buttons_container .button{ border: var(--darker-grey) solid 3px; display: flex; background: none;}
.user_buttons_container .button .button_icon{ margin-right: 0.5rem;}
.user_buttons_container .button + .button{ margin-top: 0.5rem;}

.dashboard_sidebar_buttons_container .button{ display: flex;}
.dashboard_sidebar_buttons_container .button .button_icon{ margin-right: 0.5rem;}
.dashboard_sidebar_buttons_container .button + .button{ margin-top: 5px;}

.dashboard_sidebar_buttons{ width: 100%;}

.dashboard_buttons h6{ font-size: 1rem; padding-bottom: 0.75rem;}

#sidebar .button{ min-height: calc(50px - 1rem); padding: 0 1rem;}

.dashboard_buttons{ margin: 1rem 0;}
.dashboard_buttons .button{ justify-content: center;}

#sidebar_toggle{ position: fixed; top: 125px; left: 0; background: var(--blue); padding: 1rem 1.5rem 1rem 1rem; border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0; display: none; transition: all 0.3s; box-shadow: 0 3px 12px rgba(0,0,0,0.16);}
#sidebar_toggle span{ display: block; background: #fff; width: 35px; height: 3px;}
#sidebar_toggle span + span{ margin-top: 3px;}

#sidebar .new_message_count{ border-radius: 50%; background-color: var(--yellow); color: #000; width: 30px; height: 30px; margin-left: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem;}

#sidebar .messages_button{ justify-content: space-between;}

.sidebar_buttons_container{ display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: space-between; overflow: auto;}

/* General Page Styles */

main{ display: block; margin: 0 auto; height: calc(100vh - 55px); overflow: auto;}
main#homepage{ height: auto; overflow: auto;}
main.no_scroll{ overflow-y: hidden; overflow-x: auto;}
main.has_sidebar{ padding-left: calc(312px + 1rem);}

main > .content_padding{ padding: 2rem 3rem; margin: 0 auto;}
.small_section{ max-width: 500px; margin: 0 auto;}

.page_heading{ margin: 0 0 3rem 0;}

hr.section_sep{ margin: 3rem 0;}

/* General Form Styles */
form, form *{ font-family: 'Montserrat', sans-serif;}

input[type="text"], input[type="password"], select, input[type="email"], input[type="tel"], input[type="number"]{ border-radius: var(--border-radius-large); border: solid 1px var(--darker-grey); padding: 10px;}

textarea{ border-radius: 8px; border: solid 1px var(--darker-grey);}

input[type="submit"]{ cursor: pointer;}
input[type="submit"].button:disabled{ cursor: default; opacity: 0.4; background-color: var(--grey); border: none; color: var(--darker-grey);}

form label{ display: none;}

form :placeholder{ font-size: 0.875rem; color: #000;}

select{ appearance: none; background-image: url(assets/images/select_arrow.png); background-size: 12px 7px; background-repeat: no-repeat; background-position: 90% center; padding: 10px 40px 10px 10px;}

/* Regisration Pages */
/* main.registration_area{ text-align: center;} */

.user_type_boxes{ justify-content: center;}

.user_type_box{ border: solid 2px var(--blue); border-radius: var(--border-radius-large); text-align: center; max-width: 460px; width: 100%; margin: 0 1rem;}
.user_type_box_padding{ padding: 2rem 2.5rem;}

.user_type_box h5{ padding-bottom: 2rem;}
.user_type_box label{ font-size: 1.5rem; font-weight: 500; text-align: left; margin-left: 2rem;}

.user_form_choices{ display: inline-block;}
.provider_option{ text-align: left; display: flex;}
.provider_option + .provider_option{ margin-top: 1rem;}

.provider_option input[type="checkbox"]{ margin-top: 10px;}

main.registration_area form > div + div{ padding-top: 1rem;}
main.registration_area form small{ display: block;}

main.registration_area form input:not(input[type="submit"],input[type="checkbox"]){ width: 100%; box-sizing: border-box;}

main.registration_area form .form_line{ display: flex;}
main.registration_area form .form_line + .form_line{ padding-top: 1rem;}

main.registration_area form .form_line select + input{ margin-left: 10px;}

#divCheckPassword{ color: var(--secondary-green);}
#divCheckPassword.red{ color: var(--pink);}

#user_registration label{ display: inline;}

#registration_billing_info_form_container input[type="submit"]{ margin-top: 2rem;}

/* Login Screen */
#login_logo{ position: relative; margin-bottom: 2rem; z-index: 1;}
#login_logo a{ display: inline-block; position: relative;}
#login_logo a::after{ content:''; position: absolute; top: calc(100% - 5px); left: 0; width: 100%; height: 100%; background-image: url(assets/images/login_logo_reflection.png); background-repeat: no-repeat; background-size: cover; background-position: center;}

main.login form{ position: relative; z-index: 2;}
main.login form div + div{ padding-top: 1rem;}
main.login form label{ display: none;}

main.login form input[type="text"], main.login form input[type="password"]{ border-radius: var(--border-radius-large); border: solid 1px var(--darker-grey); padding: 10px;}

/* Dashboard */

/* user action grid - large buttons for user actions */
.action_grid_items{ justify-content: center; flex-flow: wrap;}

.action_grid_item{ width: calc(25% - 1rem); min-width: 250px; margin: 0.5rem; height: 220px; display: flex; align-items: center; justify-content: center; background-color: #000; font-size: 1.875rem; font-weight: 700; line-height: 107%; color: #fff; text-align: center; border-radius: var(--border-radius-large); transition: all 0.3s; flex-direction: column;}
.action_grid_item:hover{ opacity: 0.6; box-shadow: 0 3px 8px rgba(0,0,0,0.25);}

.action_grid_item small{ font-size: 1rem; font-weight: 500; line-height: 125%; padding: 10px;}

.action_grid_item.blue_grid_item{ background-color: var(--blue);}
.action_grid_item.pink_grid_item{ background-color: var(--pink);}
.action_grid_item.yellow_grid_item{ background-color: var(--yellow); color: #000;}

/* My Jobs */

.dashboard_header_bar{ background-color: var(--grey); position: relative; padding: 1.25rem 2rem; justify-content: space-between;}
.dashboard_header_bar::before{ content:""; position: absolute; left: calc(-312px - 1rem); top: 0; width: calc(312px + 1rem); height: 100%; background-color: var(--grey);}
h1.dashboard_page_title{ font-size: 1.75rem; line-height: 121%; font-weight: 700;}
h1.dashboard_page_title.has_icon{ display: flex; align-items: center;}
h1.dashboard_page_title .heading_icon{ display: inline-block; margin-right: 10px;}
p.sorting_by{ margin: 0; padding: 0; line-height: 129%; font-weight: 500;}
p.sorting_by span.sorted_by_desc{ font-weight: 700; color: var(--pink);}

.dashboard_header_left.flex{ align-items: center;}

/* Profile Screens */
.edit_profile_link{ margin-left: 2rem;}

.profile_section + .profile_section, .profile_section + form{ margin-top: 2rem;}

.profile_form_row + .profile_form_row{ margin-top: 1rem;}

.profile_section textarea{ width: 100%;}

.business_info{ padding: 1rem 0 0 0;}

h5.profile_section_heading{ font-size: 1.25rem; padding: 0 0 1rem 0;}
h5.profile_section_heading + p{ margin-top: 0;}

.profile_checklist_container .profile_checkbox label{ display: inline-block;}
.profile_checkbox + .profile_checkbox, .profile_checkbox:first-child{ margin: 0.5rem 0 0 0;}

.profile_info label{ display: block;}

.license_row + .license_row, .profile_docs_list{ margin-top: 1rem;}
.add_certificate{ margin-top: 1.5rem;}

.remove_license{ color: #000; font-size: 0.875rem; padding: 5px 0;}

.rating_stars{ position: relative; display: inline-block;}
.rating_stars img{ position: relative; z-index: 2; display: block;}
.ratings_fill{ position: absolute; height: 100%; left: 0; top: 0; background-color: var(--blue);}

.reviews_link{ font-size: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;}

.reviews_heading{ margin-bottom: 2rem;}

.ratings_count{ padding-left: 5px;}

.business_data > p{ margin: 0; padding: 0;}
p.business_data_question{ margin-top: 1rem;}

.business_data_answer{ text-transform: capitalize;}

/* search */
#job_search_form{ background: #fff; border-radius: var(--border-radius-large); display: flex; align-items: center;}
#job_search_form button{ background: none; border: none; margin: 0; padding: none;}
#job_search_form input{ border: none; background: none;}

#my_jobs_filter{ margin-left: 2rem;}
#my_jobs_filter select{ color: #fff; background-color: var(--blue); font-weight: 700; background-image: url(assets/images/select_arrow_white.png); box-shadow: none; border: none;}
#my_jobs_filter select option{ line-height: 200%;}

.profile_submit_buttons{ margin-top: 1.5rem; padding-top: 1.5rem; border-top: solid thin #000;}

/* job lists */
.jobs_lists{ padding: 40px 2rem 0 2rem; width: calc(100% - 4rem); display: flex; overflow-x: auto;}

.job_listing_column{ min-width: 350px; box-sizing: border-box; width: 100%;}

.job_listing_column + .job_listing_column{ margin-left: 2rem;}

h3.job_list_title{ font-size: 1.25rem; font-weight: 700; padding: 0 0 1rem 0; margin: 0; line-height: 120%;}

.job_list{ background-color: var(--light-grey); border-radius: 10px; padding: 10px; width: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto;}

/* ind. job card */
.job_card{ background-color: #fff; border-radius: 10px; box-sizing: border-box; padding: 10px;}
.job_card + .job_card{ margin-top: 1.5rem;}

.job_cover_image{ overflow: hidden; width: 100%; height: 120px; border-radius: 10px; margin-bottom: 10px;}
.job_cover_image img{ display: block; object-fit: cover;}

h4.card_job_title{ font-size: 1.25rem; font-weight: 700; margin: 0; padding: 0; line-height: 120%; color: #454545;}
h4.card_job_title a{ color: #454545; transition: all 0.3s;}
h4.card_job_title a:hover{ color: var(--blue);}

.job_card{ align-items: center;}
.card_client_name{ font-size: 1.125rem; font-weight: 700; color: var(--darker-grey);}

.card_info{ align-items: center;}
.card_info .card_notification{ margin-left: 10px;}

.card_notification{ border-radius: 10px; color: #fff; font-size: 0.625rem; font-weight: bold; padding: 3px 10px;}
.card_notification.pink{ background-color: var(--pink);}
.card_notification.green{ background-color: var(--secondary-green);}
.card_notification.orange{ background-color: var(--secondary-orange);}
.card_notification.purple{ background-color: var(--secondary-purple);}
.card_notification.teal{ background-color: var(--secondary-teal);}
.card_notification.grey{ background-color: var(--dark-grey);}

.card_bottom{ justify-content: space-between; align-items: center;}

.card_job_address{ font-size: 1rem; font-style: italic; font-weight: 500; line-height: 129%; color: var(--darker-grey); margin: 0; padding: 0;}

.card_due_date{ font-size: 0.625rem; color: var(--darker-grey); margin-left: 10px;}

.bid_count, .message_count{ align-items: center; font-size: 1rem; font-weight: 700; line-height: 100%;}

.bid_count + .message_count{ margin-top: 8px;}

.bid_count .count_icon, .message_count .count_icon{ margin-right: 4px;}

/* Find Jobs */
.find_jobs_header_right, .find_jobs_header_center{ align-items: center;}
.find_jobs_header_center a{ margin: 0 1rem; font-weight: 500; color: #000;}

.jobsearch_map_container{ position: relative; width: 100%; height: 60vh;}
.jobsearch_map{ position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

#map_address_search_form{ display: flex; align-items: center; height: 100%;}
#map_address_search_form button{ background: #fff; border: none; margin: 0; padding: 8px; border-radius: 28px 0 0 28px;}
#map_address_search_form input{ border: none; background: #fff; border-radius: 0 28px 28px 0;}
#map_address_search_form label{ display: inline-block; margin-right: 5px;}

.mapboxgl-popup-content{ font-family: 'Montserrat', sans-serif;}

.find_job_list, .find_job_list_hidden{ display: none;}
.find_job_list.active{ display: flex;}
.find_job_list .job_card{ margin: 1rem; box-shadow: 0 3px 12px rgba(0,0,0,0.16);}

.list_view_toggle .link_icon, .map_view_toggle .link_icon{ display: block; text-align: center; padding-bottom: 4px;}
.list_view_toggle, .map_view_toggle, .list_view_toggle *, .map_view_toggle *{ transition: all 0.3s;}
.list_view_toggle .link_icon svg, .map_view_toggle .link_icon svg{ height: 15px; width: auto;}
.list_view_toggle:hover .link_icon svg, .list_view_toggle:hover .link_icon svg *, .map_view_toggle:hover .link_icon svg, .map_view_toggle:hover .link_icon svg *{ fill: var(--blue) !important;}

/* Create Work Order */
#create_work_order label{ display: block; font-size: 1rem; font-weight: 700; padding: 0 0 5px 0;}
#create_work_order .form_section label{ display: none;}
#create_work_order .deliverable_section label{ display: block;}
#create_work_order .form_section label.visible_label{ display: block;}

h5 + .work_order_deliverable{ margin-top: 1rem;}
.deliverable_section:first-child{ width: 30%;}
.deliverable_section:last-child{ width: 70%;}
.deliverable_section + .deliverable_section{ padding-left: 2rem;}

.work_order_deliverable + .form_item{ margin-top: 1.5rem;}

#create_work_order .form_item + .form_item{ margin-top: 1.5rem;}
#create_work_order .form_section .flex .form_item + .form_item{ margin-top: 0; margin-left: 1rem;}
#create_work_order .form_section{ margin: 1.5rem 0;}

#create_work_order input:not(input[type="date"], input[type="number"], input[type="checkbox"], input[type="submit"]){ width: calc(100% - 20px);}
#create_work_order textarea{ width: 100%;}

#create_work_order input[type="checkbox"] + label{ display: inline;}

h6.form_heading{ padding-bottom: 1rem; font-size: 1rem;}

#create_work_order .sep_sign_address{ display: none;}

.form_section.file_uploads > h5{ margin-bottom: 1rem;}

#create_work_order hr{ margin: 1.5rem 0; padding: 0;}

.deliverables_container{ margin-bottom: 1.5rem;}

.submit_work_order_row{ margin-top: 1.5rem; padding-top: 1.5rem; border-top: solid thin #000;}

/* Work Orders / Jobs */

.work_order_heading{ justify-content: space-between;}
.work_order_id{ }

.work_order_col.left_col{ width: 60%;}
.work_order_col.right_col{ width: 40%;}

.work_order_col.left_col + .work_order_col.right_col{ margin-left: 2.5rem;}

.work_order .page_heading{ margin: 0 0 1rem 0;}

.job_section + .job_section{ padding: 1.5rem 0 0 0;}
.work_order_col.right_col .job_section + .job_section{ padding: 2rem 0 0 0;}

.client_address p{ margin-top: 0; padding-top: 0;}
.sign_address p{ margin-bottom: 0; padding-bottom: 0;}

.p_heading + p{ margin-top: 0; padding-top: 5px;}

.job_section p:last-child{ margin-bottom: 0;}

.location.job_section{ padding: 1.5rem 0;}

/* job status bubbles */
.job_status{ border-radius: 10px; background-color: var(--darker-grey); color: #fff; font-size: 0.8rem; font-weight: 700; display: inline-block;}
.job_status span{ padding: 3px 7px;}

.job_status.draft{}
.job_status.open{ background-color: var(--secondary-green);}
.job_status.in_progress{ background-color: var(--secondary-orange);}
.job_status.needs_confirmation{ background-color: var(--secondary-teal);}
.job_status.complete{ background-color: var(--secondary-purple);}
.job_status.incomplete{ background-color: var(--red);}

.job_file a{ width: 100px; height: 100px; overflow: hidden; background-color: var(--darker-grey); font-size: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px;}
.job_file a img{ object-fit: cover; width: 100%; height: 100%; display: block; } 

.job_file a svg{ display: block; height: 40px; width: auto;}
.job_file a svg, .job_file a svg *{ fill: #fff !important;}

.job_attachment_grid{ flex-flow: wrap;}
.job_file + .job_file{ margin-left: 1rem;}

.addresses_container + .map_container{ margin-left: 40px;}

.job_attachment_grid{ margin: 5px 0 0 0;}

.job_spec_list{ margin: 5px 0 0 0; flex-flow: wrap;}
.job_spec_item p{ margin: 0;}

.job_spec_item{ margin: 1rem; width: calc(50% - 2rem);}

/* maps */
.location.job_section .map_container{ width: 75%; border-radius: 12px; overflow: hidden; height: 200px;}
.location.job_section .map_container #map{ height: 100%;}

/* bidding form */
#place_a_bid button[type="submit"]{ display: flex; margin-top: 1rem;}
#place_a_bid span.bid_symbol{ display: inline-block; padding-right: 5px;}
#place_a_bid span.bid_currency{ display: inline-block; padding-left: 5px;}

/* bids list */
.bid_item{ align-items: center; justify-content: space-between;}
.bid_item + .bid_item{ margin-top: 1.5rem;}
.provider_name{ display: block;}

.bid_item button{ white-space: nowrap; cursor: pointer; margin-left: 1rem;}

/* Job Messages */
#send_message textarea{ width: 100%;}

#send_message button{ text-align: right; margin: 1rem 0 0 auto; display: block; cursor: pointer;}

/* Job Messages List */
.message_list{ max-height: 400px; padding: 0 0 1rem 0; overflow-y: auto; overflow-x: hidden;}

.message_list + .new_message_container{ margin-top: 2rem;}

.new_message_container label{ display: block; font-size: 0.85rem; font-weight: 700;}

.message_item{ border-radius: 8px; background-color: rgba(0,161,237,0.2); padding: 15px;}
.message_item.received_message{ background-color: var(--light-grey);}
.message_item.sent_message{ background-color: rgba(0,161,237,0.2);}
.message_item p{ font-size: 0.85rem; margin: 0; padding: 0;}
.message_item p.from{ font-weight: 700;}
.message_item + .message_item{ margin-top: 1rem;}

/* message replies in "open" jobs */
.reply_to_message{ text-align: right; margin: 1rem 0 0 auto; display: block; cursor: pointer;}

.message_reply{ display: none; padding: 10px 0;}
.message_reply textarea{ width: 100%;}
.message_reply button{ cursor: pointer; margin: 1rem 0 0 auto; display: block;}

#reply_to_message_open label{ display: block; font-size: 0.85rem; font-weight: 700; padding: 10px 0 5px 0;}

/* complete status - feedback form */
.feedback_uploader{ padding: 0 0 10px 0; margin-bottom: 15px; border: dashed 2px var(--darker-grey); border-radius: 8px; box-sizing: border-box; text-align: center;}

.feebback_submit button{ margin: 5px; cursor: pointer;}

.feedback_grid{ flex-flow: wrap;}
.feedback_item a{ width: 100px; height: 100px; overflow: hidden; font-size: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px;}
.feedback_item a img{ object-fit: cover; width: 100%; height: 100%; display: block; } 
.feedback_item + .feedback_item{ margin-left: 1rem;}

/* review panel for submitting review */
#review_body{ width: 100%;}
#review_small{ display: block; padding: 5px 0 1.5rem 0;}
#write_a_review button{ text-align: right; margin: 1rem 0 0 auto; display: block; cursor: pointer;}

.radio_rating{ appearance: none; background: none; border: none; width: 32px; height: 35px; background-image: url(assets/images/review_star_single.png);}
.radio_rating:checked{ background-color: var(--blue);}


/* Settings Screen */
.settings_section form{ padding-top: 1.5rem;}
.settings_section form#user_notifications{ padding-top: 1rem; font-size: 0.875rem;}
.settings_section form#user_notifications .form_row{ display: flex; padding: 5px 0;}
.settings_section form small{ display: block; padding: 10px 0 0 0;}

.settings_section + .settings_section{ padding-top: 3rem;}

/* Message center */
.message_card{ background-color: #fff; border-radius: 10px; box-sizing: border-box; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.16);}
.message_card + .message_card{ margin-top: 1rem;}

.message_card .message_header{ justify-content: space-between; align-items: center; border-bottom: 2px solid var(--light-grey); padding-bottom: 5px; margin-bottom: 5px;}
.message_card .message_header h6 a{ color: #000; transition: all 0.3s;}
.message_card .message_header h6 a:hover{ color: var(--blue);}
.message_card .message_header a.mark_as_read_link{ color: var(--blue); text-decoration: none; font-size: 0.875rem; font-weight: 500;}
.message_card p{ margin: 0; padding: 0;}

.message_card p.message_from{ font-weight: 700;}
.message_card p.message_content{ background-color: var(--light-grey); border-radius: 10px; padding: 10px; margin: 5px 0;}

.message_card .card_notification{ background-color: var(--yellow); margin-left: 10px; color: #000;}
.message_header_left{ align-items: center;}

/* Home Page */
#homepage header{ padding: 1rem 0;}
#homepage header .flex_right{ justify-content: flex-end; margin: 0 auto; width: 95%;}
.user_actions a{ font-weight: 700; color: var(--blue); transition: all 0.3s;}
.user_actions a:hover{ color: var(--dark-grey);}
.user_actions a + a{ margin-left: 2rem;}

.home_section{ position: relative; background-color: #fff;}
.home_section:not(.home_hero){ z-index: 2;}

.home_section.home_hero{ z-index: 1; padding: 0;}
.hero_container{ width: 85%; justify-content: center; margin: 0 auto; align-items: center; padding: 3rem 0 8rem 0;}
.hero_content{ width: 50%;}
.hero_content.hero_left{ position: relative;}
.hero_content.hero_left::after{ content:""; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-image: url(assets/images/hero_logo_reflection.jpg); background-size: cover;}

.hero_content.hero_right .hero_text{ padding: 0 0 0 5%;}

.hero_logo img{ display: block; width: 100%; height: auto;}

.hero_text > .button{ margin-top: 1rem;}

.home_section{ padding: 3rem 0;}

.home_section_one{ background-image: url(assets/images/home_section_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #000;}
.home_section_one .home_section_one_content *{ color: #fff;}

/* .home_section_inner{ width: 50%;} */

.home_section_inner img{ display: block; width: 100%; height: auto;}

.home_inner_padding{ padding: 0 5%;}

.temp_img{ background: var(--light-grey); justify-content: center; align-items: center; width: 100%; height: 260px; border-radius: 8px;}

.home_get_started{ background-color: var(--blue); padding: 2rem 0;}
.get_started_padding{ justify-content: center; align-items: center;}

/* Home Page Footer */
footer#home_footer{ background-color: #000; color: #fff; text-align: center;}

.footer_content{ padding: 2rem 0;}

.footer_logo{ margin-bottom: 1.5rem;}
.footer_logo a{ font-size: 0;}

.footer_links .flex{ justify-content: center; align-items: center;}
.footer_links a{ color: #fff; font-size: 0.875rem; font-weight: 600;}
.footer_link_divider{ margin: 0 1rem; color: #fff;}

.copyright{ text-align: center;}
.copyright p{ color: #fff;}

/* serach results */
.search_results{ flex-flow: wrap;}
.search_results .job_card{ width: calc(33.3333% - 2rem); margin: 1rem; box-shadow: 0 3px 12px rgba(0,0,0,0.16); }

/*****************************************/
/************* MEDIA QUERIES *************/
/*****************************************/

@media all and ( max-width: 1300px ) {
	
	/* Sidebar */
	#sidebar{ left: -100%; border-radius: var(--border-radius-large) 0 var(--border-radius-large) var(--border-radius-large);}
	#sidebar.open{ left: 1rem;}
	
	#sidebar_toggle{ display: block; z-index: 999;}
	#sidebar_toggle.open{ left: calc(312px + 1rem);}
	
	/* Main section */
	main.has_sidebar{ padding-left: 0;}
	
	/* HOME PAGE */
	/* hero */
	.hero_content.hero_right .hero_text h1{ font-size: 3.25rem;}
	
}

@media all and ( max-width: 1200px ) {
	/* Font Styles */
	h1{ font-size: 3rem;}
	h2{ font-size: 2.25rem;}
	h3{ font-size: 2rem;}
	h4{ font-size: 1.5rem;}
	h5{ font-size: 1.25rem;}
	h6{ font-size: 1rem;}
	
	/* HOME PAGE */
	/* hero */
	.hero_container{ width: 95%;}
	
	.hero_content.hero_right .hero_text h1{ font-size: 2.5rem;}
}

@media all and ( max-width: 1024px) {
	.work_order_columns{ flex-flow: wrap;}
	.work_order_col.left_col, .work_order_col.right_col{ width: 100%;}
	.work_order_col.left_col + .work_order_col.right_col{ margin-left: 0; margin-top: 3rem;}
	
	.work_order_deliverable .flex{ flex-direction: column;}
	.deliverable_section + .deliverable_section{ padding-left: 0; margin-top: 2rem;}
	.deliverable_section:first-child,.deliverable_section:last-child{ width: 100%;}
	
	#create_work_order .form_item > .flex:not(.center_valign), #create_work_order .form_item.flex{ flex-direction: column;}
	
	#create_work_order .form_item > .flex:not(.center_valign) .form-item{ margin-top: 1rem;}
	
	#create_work_order .form_section .flex .form_item + .form_item{ margin-left: 0; margin-top: 1rem;}
	
	#create_work_order .site_contact .flex{ flex-direction: column;}
	
	/* HOME PAGE */
	/* hero */
	.hero_container{ flex-direction: column; justify-content: center; align-items: center; padding: 2rem 0;}
	.hero_content{ width: 100%;}
	.hero_content.hero_left{ max-width: 400px; margin-bottom: 2rem;}
	.hero_content.hero_left::after{ display: none;}
	
	.home_section > .flex{ flex-direction: column; justify-content: center;}
	.home_inner_padding{ padding: 1rem 0;}
	
	.home_section_inner img{ max-width: 450px; margin: 0 auto;}
	
	.footer_links .flex{ flex-direction: column; justify-content: center;}
	.footer_links a{ padding: 0.5rem 0;}
	.footer_link_divider{ display: none;}
	
	.work_order_heading{ flex-direction: column;}
	.work_order .page_heading{ order: 2;}
	.work_order_id{ order: 1; margin-bottom: 1.5rem;}
	
	.job_spec_item{ width: 100%; margin: 1rem 0;}
	.job_section.location > .flex{ flex-direction: column;}
	.location.job_section .map_container{ width: 100%;}
	.addresses_container + .map_container{ margin-left: 0; margin-top: 1.5rem;}
	
	/* Dashboard Header */
	h1.dashboard_page_title{ font-size: 1.5rem;}
	
	.dashboard_header_bar{ flex-direction: column;}
	.dashboard_header_left, .find_jobs_header_right, .find_jobs_header_center{ width: 100%;}
	.dashboard_header_left.flex{ justify-content: space-between;}
	.find_jobs_header_right, .find_jobs_header_center{ justify-content: center;}
	
	.dashboard_header_bar > div + div{ margin-top: 1rem;}
}