/*****
*	Main Stylesheet for McCarty PWA
*
*	Fonts:
*		font-family: "Poppins", sans-serif;
******/
:root{
	--blue: #067e96;
	--lightblue: #90bec7;
	--darkblue: #034451;
}

#loading_screen{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: white; z-index: 99999!important; display: block;}

*{ box-sizing: border-box; }

html, body{ font-size: 100%; font-family: "Poppins", Arial, Helvetica, Open Sans, sans-serif; margin: 0; padding: 0;}

main{ font-size: 1rem;}

.wrapper{ width: 95%; max-width: 768px; margin: 0 auto;}

.flex{ display: flex;}
.allcaps{ text-transform:uppercase;}

a{ color: var(--blue); text-decoration: none; font-weight: 600;}

/*h1{}*/
h2{ font-size: 1.75rem;}
/*h3{}
h4{}
h5{}
h6{}*/

/* Header Nav */
header{ background-color: var(--blue); position: fixed; top: 0; left: 0; width: 100%; z-index: 9990; border-bottom: thin solid lightgray;}
.header_padding{ padding: 0.5rem 2.5%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}

.attachment-info .edit-attachment{ display: none !important;}

.home_button{ text-transform: uppercase; font-size: 0.7rem; display: flex; align-items: center; flex-direction: column; text-decoration: none; color: white; padding: 0 1rem;}
.home_button .link_text, .home_button .link_icon{ display: flex; align-items: center; justify-content: center; text-align: center;}
.home_button .link_text{ font-weight: 700;}
.home_button svg{ height: 15px; width: auto; fill: white !important;}

.home_button.dark{ color: #000;}
.home_button.dark svg{ fill: #000 !important;}

nav.main_nav{ display: flex; align-items: center;}

/* Actions Nav */
.actions_nav_container{ padding: 1.5rem 0;}

/* Create New Nav */
.create_nav{ display: flex; align-items: center; justify-content: center; flex-flow: wrap;}
.create_nav a{ padding: 1rem; color: var(--blue); margin: 0.25rem 1rem; border: solid 2px lightgray; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.25);}
.create_nav .link_icon{ display: flex; justify-content: center; padding-bottom: 10px;}
.create_nav svg{ display: block; height: 50px; width: auto;}

/* Modal Title */
.modal h2.modal_title{ text-align: center; margin: 0 0 1rem 0; display: flex; align-items: center; justify-content: center;}
.modal h2.modal_title span.modal_title_icon{ padding-right: 10px; display:block;}
.modal h2.modal_title span.modal_title_icon svg{ height: 30px; width: auto; display: block;}

/* Footer */
footer{ padding: 2rem 0; display: block;}

/* Modals - General */
.modal{ display: none; position: fixed; width: 90%; max-width: 640px; border-radius: 8px; background-color: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.35); z-index: 9999; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-height: 95vh; overflow: auto;}
#modal_overlay{ z-index: 9998; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5); display: none; transition: all 0.3s;}
body.open_modal #modal_overlay{ display: block;}
body.open_modal{ overflow: hidden;}
.modal_header{ text-align: right;}
.modal_body{ padding: 1rem 2rem;}
.modal_footer{ text-align: center;}

.img_modal{ max-width: 90vw; max-height: 90vh; width: auto;}
.img_modal .modal_body{ padding: 0.5rem 1rem;}
.img_modal img{ max-width: calc(90vw - 2rem); max-height: calc(90vh - 60px - 2rem); height: auto; display: block; width: auto; margin: 0 auto;}

/* Button(s) */
.custom_button{ text-decoration: none; cursor: pointer; transition: all 0.3s; border: none; background: none;}

main button:not(.custom_button), main .button, .modal button{ padding: 0.75rem; background-color: var(--blue); color: #fff; border-radius: 8px; font-size: 0.8rem; text-decoration: none; cursor: pointer; transition: all 0.3s; border: none; margin: 10px; text-align: center; display: inline-block;}
main button:hover, main .button:hover, .modal button:hover{ background-color: var(--darkblue);}

button.close_modal{ margin: 0 0 0 auto; padding: 1rem; /*position: absolute; top: 0; right: 0;*/ border: solid thin lightgray; border-radius: 0 8px 0 0;}
button.close_modal:hover{ background-color: lightgray;}
button.close_modal svg{ display: block; width: 18px; height: auto;}

main .button.with_icon{ display: inline-flex; align-items: center;}
main .button.with_icon svg{ height: 20px; width: auto; display: block;}
main .button.with_icon svg, main .button.with_icon svg *{ fill: #fff !important;}
main .button.with_icon span.link_icon{ margin-right: 5px;}

/* Create Button */
.nav_add_toggle,.svg_circle_button{ background-color: white; display: flex; width: 35px; height: 35px; align-items: center; justify-content: center; border-radius: 50%;}
.nav_add_toggle svg, .svg_circle_button svg{ width: 25px; height: auto; display: block;}
.nav_add_toggle svg, .nav_add_toggle svg *, .svg_circle_button svg, .svg_circle_button svg *{ fill: var(--blue) !important;}
.nav_add_toggle:hover{ background-color: var(--lightblue);}

/* Hide specific fields on front end forms 
	* these are auto-filled via PHP
*/
div[data-name="timestamp"], div[data-name="report_number"], .acf-repeater .acf-row-handle.order{ display: none;}

#report_attachments .acf-repeater .acf-row-handle.order{ display: table-cell;}

/*** REPORTS PAGES ***/
	.report_header{ text-align: center; padding: 0.5rem 0.75rem; background-color: rgba(0,0,0,0.1);}
	.report_header h3, .report_header h5{ margin: 0;}

	.report_grouping{ margin-top: 2rem; padding-top: 2rem; border-top: 2px solid lightgray;}
	.report_grouping > h3{ margin-top: 0; text-transform: uppercase;}
	
	.report_meta_container{ flex-flow: wrap;}
	.report_meta_container span{ padding: 5px;}
	
	span.project_info_line{ display: block;}

	/* Items of Note */
	.ion_image{ margin: 1rem 0;}
	.ion_image img{ display: block; width: 100%; height: auto;}
	
	.items_of_note_listing, .items_of_note_listing ul{ list-style: none; width: 100%;}
	.items_of_note_listing li{ display: flex; flex-flow: wrap; margin-left: -20px;}
	.items_of_note_listing .note_content{ width: calc(100% - 30px);}
	li.item_of_note:before { content: '\2022'; font-size: 1.25rem; line-height: 100%; width: 20px;}
	li.item_of_note.completed:before { content: '\2713';}
	
	.items_of_note_listing > li{ padding: 10px; border: solid thin rgba(0,0,0,0.15);}
	.items_of_note_listing li li{ background-color: rgba(0,0,0,0.1); padding: 10px; width: calc(100% + 10px);}
	
	#jobsite_notes_repeater .acf-table>tbody>tr>td, #wip_repeater .acf-table>tbody>tr>td{ border-top-width: 20px;}
	
	.subnote_listing{ margin: 1rem 0;}
	.subnotes_group{ padding-left: 2rem !important;}
	.acf-field-repeater .acf-repeater .acf-fields .acf-field.subnotes_group:before{ content:""; position: absolute; width: 1.5rem; left: 0; top: 0; display: block; }

	/* Attachments */
	.reports_attachments_container{ flex-flow: wrap; justify-content: space-between;}
	.report_attachment_item{ width: calc(50% - 20px); box-sizing: border-box;}
	.report_attachment_img_container{ width: 100%; height: 300px}
	.report_attachment_img_container img{ display: block; width: 100%; height: 100%; object-fit: contain;}
	.report_attachment_item small{ font-size: 0.8rem; padding-top: 0.75rem;}
	
/*** PROJECT PAGES ***/
	
	#project_footer_nav{ position: 9990; position: fixed; bottom: 0; left: 0; width: 100vw; padding: 0.5rem 2.5%; box-sizing: border-box; display: flex; align-items: center; background-color: #fff; border-top: solid thin lightgray;}
	
	/* Project Modal Links */
	.project_modal_list{ overflow: auto; list-style: none; margin: 0; padding: 1rem 0;}
	.project_modal_list li{ padding: 0.5rem 0;}
	.project_modal_list li span{ display: block;}
	.project_modal_list li + li{ border-top: thin solid rgba(0,0,0,0.2);}
	.project_modal_list a{ white-space: normal; word-wrap: break-word;}
	.proj_list_date{ font-size: 0.8rem; color: gray;}

/*** ACF Form Styles ***/
#acf-form > .acf-fields.-top > .acf-field > .acf-label > label{ font-size: 1.5rem; font-weight: 700;}
.acf-fields.-top > .acf-field > .acf-label > label, .acf-table th label{ font-weight: 700;}
.acf-field input[type=text], .acf-field input[type=password], .acf-field input[type=date], .acf-field input[type=datetime], .acf-field input[type=datetime-local], .acf-field input[type=email], .acf-field input[type=month], .acf-field input[type=number], .acf-field input[type=search], .acf-field input[type=tel], .acf-field input[type=time], .acf-field input[type=url], .acf-field input[type=week], .acf-field textarea, .acf-field select{ border-radius: 6px; border: solid thin rgba(0,0,0,0.3); padding: 8px 10px; font-size: 1rem; background-color: rgba(0,0,0,0.03); transition: all 0.3s;}
.acf-field *:focus-visible{ background-color: #fff !important;}

#acf-form [data-name=timestamp]{ display: none;}

#work_in_progress_repeater{ padding: 0; border: none;}
#work_in_progress_repeater > .acf-label{ display: none;}
[data-name=work_in_progress_group] .acf-fields.-border,[data-name=project_information] .acf-fields.-border{ border:none;}

.acf-field-repeater .acf-repeater .acf-fields .acf-field{ display: flex; flex-flow: wrap;}
.acf-field-repeater .acf-repeater .acf-fields .acf-field:before{ display: none;}
.acf-field-repeater .acf-repeater .acf-fields .acf-field > div{ width: 100%;}

.acf-fields > .acf-field{ padding: 1rem 0;}

.acf-image-uploader-aspect-ratio-crop p{ display: inline-flex; flex-direction: column;}

form > .acf-form-submit{ padding: 2rem; text-align:center;}
.modal .acf-form-submit{ padding: 1rem 0 0 0;}
form > .acf-form-submit > .button{ font-size: 1rem; font-weight: bold;}

.acf-label.form_label_flex{ display: flex; align-items: center; justify-content: space-between;}

.floating_form_submit{ position: fixed; bottom: 0; left: 0; width: 100%; padding: 0; display: flex; align-items: center; justify-content: center; background-color: var(--blue); z-index: 9990;}
main .floating_form_submit .button{ background-color: white; color: var(--blue); font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center;}
main .floating_form_submit .button span.button_icon, main .floating_form_submit .button span.button_text{ display: flex; align-items: center; justify-content: center; text-align: center;}
main .floating_form_submit .button span.button_text{ font-weight: 700;}
main .floating_form_submit .button span.button_icon{ margin-right: 7px;}
main .floating_form_submit .button span.button_icon svg{ height: 18px; width: auto; fill: var(--blue) !important;}

/******* MEDIA QUERIES ********/
@media all and ( max-width: 1024px ) {
	.media-modal{ width: 90vw !important; height: 90vh !important; left: 5vw !important; top: 5vh !important;}
}

@media all and ( max-width: 480px ) {
	.modal_title{ font-size: 1.2rem;}
	.create_nav svg{ height: 30px;}
	
	.report_attachment_item{ width: calc(100% - 20px); box-sizing: border-box;}
}