body {
}

h1 {
	vertical-align: middle;
	display: inline-block;
}

h2 {
	display: inline-block;
	padding: 6px;
}

h3 {
	text-transform: uppercase;
	vertical-align: middle;	
}

h3.group_header {
	display: inline-block;
	margin: 0px;
}

h3.viewgroup_header{
	display: inline-block;
	margin-top: 1.5em;
	margin-left: 1em;
}

table.survey_group {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.6em;
}

table.image_table {
	border-collapse: collapse;
	margin: 0.6em;
}

th.survey_group_header {
	min-width: 25%;
	font-size: 1.4em;
}

th.survey_subgroup_header {
	font-size: 1.4em;
	text-align: center;
}

th.survey_imagecomment_header {
	text-align: center;
}

th.survey_image_header {
	text-align: center;
}

tr.survey_header_row {
	width: 100%;
}

tr.survey_question_row {
	border: 2px solid #666;
}

td.survey_question_text {
	min-width: 25%;
	font-size: 1.5em;
}

td.survey_options {
	text-align: center;
	border-left: 2px solid #666;
	border-right: 2px solid #666;
	border-spacing: 0px;
}

td.survey_image_thumb {
	padding: 0.6em;
}


td.survey_image_comments{
	padding: 0.6em;
	padding-left: 3em;
	min-width: 400px;
}


textarea.survey_textarea {
	width: 90%;
}

table.survey_group {
}

table.survey_list {
	border-collapse: collapse;
}

table.survey_list th {
	text-align: center;
	font-size: 1.4em;
}


table.survey_list td {
	font-size: 1.3em;
	padding-left: 1.2em;
	padding-right: 1.2em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

th.hide_header {
	display: none;
}

.errorlist {
	color: #f00;
}

div.top {
	background-color: #99f;
	padding: 0.8em;
	overflow: auto;
	vertical-align: middle;
}

div.main {
	padding-left: 6px;
}


div.company_logo_viewsurvey {
	position: relative;
	float: right;
}

div.header_logout {
    display: inline-block;    
    color: #000;
    padding: 1em;
    vertical-align: middle;
    float: right;
}

div.header_logout a {
	color: #000;
}

div.header_logout a:hover {
	text-decoration: underline;
}

div.survey_group_parent_container {
	margin: 0.5em;
	vertical-align: middle;	
}

div.viewsurvey_group_container {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	margin-left: 2em;
	margin-right: 2em;
}

div#images_upload {
	margin-top:1em;
	margin-left: 0.6em;
	margin-right:0.6em;
}

div.survey_user_info  {
	font-size: 1.5em;
}

div.signoff_info {
	font-size: 1.5em;
}

p.search_signedoff_text {
	display: inline-block;
	font-size: 0.9em;
	vertical-align: middle;
	margin-left: 0.9em;
	margin-bottom: 0px;
}

/* Style the button that is used to open and close the collapsible content */
.collapse_button {

/*  background-color: #eee;
  color: #444;
  cursor: pointer;/
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px; 
	float: right; */
	display: inline-block;
  	padding: 10px;
	vertical-align: middle;	
	background-image: url('/static/images/expand.png');
	background-repeat: no-repeat;
	background-size: 35px 35px;
	background-position: center;
	background-color: #fff;
	border: none;
	width: 40px;
	height: 40px;
}

.collapse_button.complete {
background-image: url('/static/images/complete.png');
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active.collapse_button {
  background-image: url('/static/images/collapse.png');
  background-size: 35px 35px;
  background-position: center;
  border: none;
}

/* Style the collapsible content. Note: hidden by default */
.survey_group_container {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

a.filter_reset {
	margin-left: 1em;
}

ul.site_list li {
	line-height: 2;
}

button.save {
  font-size: 1.8em;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 20px;
  background-color: #2d2;
  margin-top: 0.5em;
  margin-bottom: 1.0em;
}

button.survey_search_view {
	margin-left: 2em;
}

button.survey_search_edit {
	margin-left: 2em;
}

input.filter_submit {
	margin-left: 2em;
	vertical-align: middle;
}

/* HIDE RADIO */
[type=radio] { 
	  position: absolute;
	  opacity: 0;
	  width: 0;
	  height: 0;
}

/* SURVEY IMAGES */
img.survey_choice {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 10px;
}

/* IMAGE STYLES FOR RADIO IMAGES */
[type=radio] + img.survey_choice {
  cursor: pointer;
}

/* CHECKED STYLES FOR RADIO IMAGES */
[type=radio]:checked + img.survey_choice {
  outline: 5px solid #000;
}

#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75) url(/static/images/loading2.gif) no-repeat center center;
  z-index: 10000;
}

td.reminder_column {
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}

th.reminder_column {
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}

td.due_dates {
        padding-left: 1em;
        padding-right: 1em;
}

th.due_dates {
        padding-left: 1em;
        padding-right: 1em;
}


.reminder_column select {
	color: #000;
}

table.bible_view_list {
}

th.bible_view_list_header {
}

td.bible_view_list_cell {
}

/* The alert message box */
.site_bible_notification {
  padding: 20px;
  background-color: #ffdb23; /* Yellow */
  color: black;
  margin-bottom: 15px;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}


.increaseMargin {
	margin-left: 40px;
}

.container {
	background-color: white;
	display: block;
	flex-wrap: wrap;
	margin-bottom: 10px;	
}

.job_section {
	background-color: #dfdfdf;
	box-sizing: border-box;
	padding: 10px;
	display: flex;
	flex-direction: row;
}

.job_section_header {
	background-color: #dfdfdf;
	box-sizing: border-box;
	padding: 10px 10px 0 10px;
	display: flex;
	flex-direction: row;
}

.job_section_title {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 0;	
}	

input.job_summary {
	margin: 0 20px 0 20px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

.fields-fullwidth {
	display: flex;
	flex: 0 0 100%;
	padding-left: 10px;
}

.fields-lhs {
	width: 50%;
	padding-left: 10px;
}

.fields-lhs-fullwidth { 
	width: 100%;
      	padding-left: 10px;

}


.fields-rhs {
	width: 50%;
	padding-right: 10px;
}

.flex-column {
	flex-direction: column;
}

.job_field {
	box-sizing: border-box;
	display: table;
}

.job_textarea {
	width: 100%;
	margin: 0 20px 0 20px;
        padding-left: 20px;
        padding-right: 20px;
}

.job_status {
	font-weight: 700;
	color: white;
	font-size: 14px;
	border-radius: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
	padding-right: 8px;
}

.job_comment {
	box-sizing: border-box;
	display: table;
	padding-left: 20px;
}

.job_comment_header {
	font-weight: 700;
	font-style: italic;
}

.history_section {
    background-color: #efefef;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: row;
}

.history_field {
    flex-wrap: wrap;
    display: flex;
}

.inline_block {
	display: inline-block;
}

.job_new {
	background-color: yellow;
	color: #000;
}

.job_approved {
	background-color: green;
}

.job_in_progress {
	background-color: #DC9500;
}

.job_rejected { 
	background-color: grey;
}

.job_closed {
	background-color: #006791;
}

.job_client {
	font-size: 14px;
}

.job_client_select {
	 margin: 0 20px 0 20px;
 }

.job_id {
	font-size: 14px;
}

.job_opened_date {
	font-size: 14px;
}

.job_last_updated {
	font-size: 14px;
}

/* parent for the collapsible button */
.job_collapsible_button_container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}


/* Style the button that is used to open and close collapsible content (job history)*/
.job_collapsible {
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: row;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 4px;
  border: none;
  font-size: 0.85em;
  /* width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px; */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .job_collapsible:hover {
  background-color: #d0d0d0;
}

/* Style the collapsible content. Note: hidden by default */
.job_collapsible_content {
  padding: 4px 10px 4px 10px;
  font-size: 0.8em;
  display: none;
  overflow: hidden;
  background-color: #f5f5f5;
  width: 100%;
}

.job_history_field_name {
	font-weight: 700;
	font-style: italic;
	padding: 0 6px 0 0;
}

.sortable_date_padding {
	padding: 0 10px 0 10px;
}