body {
	font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI,
		Helvetica Neue, Helvetica, Arial, sans-serif;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	color: #2f2f2f;
	line-height: 1.5;
}

a {
	text-decoration: none;
	color: #2f20d1;
}

a:hover {
	text-decoration: underline;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

h3,h4 {
    color:#396fa8;
}

.hidden {
    display:none;
}

.phppot-container {
    /*
	width: 740px;
	margin: 20px auto;
	padding: 0 20px 0 20px;
	*/
	padding:0;
}

#contact_actions {
    margin: 1em 0 0 0;
}
/*
.subscriber_display.phppot-container {
    width:100%;
    height:100%;
}
*/

#view_edit_contact_modal h3 {
    margin:10px 5px;
}

.main.phppot-container, .subscriber_display.phppot-container {
    margin:7px;
}

.row,.radio_row {
	padding: 6px 0 6px 0;
	display:flex;
}

.col {
    width:45%;
    float:left;
    margin:5px;
    padding:5px;
}

.col_4 {
    width:20%;
    float:left;
    margin:5px 0;
    padding:5px;
}

.col_3 {
    width:30%;
    float:left;
    margin:5px 0;
    padding:5px;
}

.col_2 {
    width:50%;
    float:left;
    margin:5px 0;
    padding:5px;
}

.col_3 .col {
    width:75%;
}
.main .row {
    width:25%;
}

.main .radio_row {
    width:50%;
}
.label {
	color: #565656;
	margin-bottom: 2px;
}

.card {
	padding: 1rem 2rem;
	border-radius: 4px;
	box-shadow: 0 1px 3px #747681;
}

#subscriber_data_form .row {
    padding:0;
}

#subscriber_data_form .col {
    margin:0;
}

.initial_note .col,
.contact-notes .col {
  margin: 0;
  padding:0 5px;
  width:82%;
}

.initial_note .date-row,
.contact-notes .date-row {
    padding:0;
}

.contact-notes .note-row {
    padding:0 0 10px 0
}

.initial_note .note-row {
    padding:0;
}

tr button {
    font-size:0.75em;
    padding:8px;
}

.message {
	padding: 6px 20px;
	font-size: 1em;
	color: rgb(40, 40, 40);
	box-sizing: border-box;
	margin: 0px;
	border-radius: 3px;
	width: 100%;
	overflow: auto;
}

.error {
	padding: 6px 20px;
	border-radius: 3px;
	background-color: #ffe7e7;
	border: 1px solid #e46b66;
	color: #dc0d24;
}

.success {
	background-color: #48e0a4;
	border: #40cc94 1px solid;
	border-radius: 3px;
	color: #105b3d;
}

.validation-message {
	color: #e20900;
}

.font-bold {
	font-weight: bold;
}

.display-none {
	display: none;
}

.inline-block {
	display: inline-block;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.full-width {
	width: 100%;
}

.half-width {
    width:50%;
}

.col_4 input[type='text'], .col input[type='text'] {
    width:75%;
}


.col textarea, .col_4 textarea {
    width:100%;    
}

.cursor-pointer {
	cursor: pointer;
}

.mr-20 {
	margin-right: 20px;
}

.m-20 {
	margin: 20px;
}

.tile-container {
	width: 240px;
	border: #9a9a9a 1px solid;
	border-radius: 3px;
	padding: 10px 20px 10px 20px;
}

.fixTableHead.outside {
     margin:1em 0;
}
.fixTableHead { 
  overflow-y: auto; 
  height: 75%;
 
} 
.fixTableHead thead th { 
  position: sticky; 
  top: 0; 
} 

    .slick-preheader-panel.ui-state-default  {
      width: 100%;
      overflow: hidden;
      border-left: 0px !important;
      border-bottom: 0px !important;
    }
    .slick-preheader-panel .slick-header-columns {
      border-bottom: 0px !important;
    }
  
table { 
  border-collapse: collapse;         
  width: 100%; 
} 

th, 
td { 
  padding: 8px 15px; 
  border: 2px solid #529432; 
} 
th { 
  background: #cdcdcd; 
  color:#396fa8;
} 
    
table td,
table th {
  border: 1px solid silver;
}

tbody tr {
    /*transition: transform .2s;*/
}

tbody tr:hover {
    cursor:pointer;
    /*transform: scale(1.03);*/
    background:#ddd;
    color:#396fa8;
    opacity:0.9;
}

.headerSortDown:after,
.headerSortUp:after {
  content: ' ';
  position: relative;
  left: 2px;
  border: 8px solid transparent;
}

.headerSortDown:after {
  top: 10px;
  border-top-color: silver;
}

.headerSortUp:after {
  bottom: 15px;
  border-bottom-color: silver;
}

.headerSortDown,
.headerSortUp {
  padding-right: 10px;
}

#DivToShow {
    display:none;
    position:absolute;
    z-index:10;
    height:26px;
}

#cover {
    height: 100vh;
    position: absolute;
    width: 100vw;
    z-index: 10000;
    background: transparent;
}

#cover #msg {
    position: relative;
    left: 0;
    font-size: 5em;
    top: 0;
    color: #f79147;
    text-align: center;
    margin: 25% 0;    
}

#DivToShow button {
    margin:0 7px;
    opacity:0.9;
}

#contact_list,#metrics_list {
    z-index:5;
}

.modal {
    max-width:100% !important;
}

input:disabled {
    opacity:0.75;
}

input[type=checkbox]:disabled {
    opacity:1;
}

#bulk_actions {
    margin:15px 0;
}

.go_back_btn {
    margin:8px;
}

.ui-widget .filter_btn {
    margin:7px !important;
}

.phppot-container.main h3 {
    color:#396fa8;
}

#contact_notes {
    max-height:75%;
    overflow-y:auto;
}

#subscriber_data_form {
    width:100%;
}

.radio-label-header {
    margin: 0 0 1em 0;
}

.checkbox-label,
.radio_label {
    display:inline-block;
}

input[type=radio] {
    width:25px;
}

.ui-widget.filter_box {
    margin:1em !important;
}

.row .ui-widget.filter_box,
.radio_row .ui-widget.filter_box{
    margin: 0 !important;
}

.phppot-container.main h3,
.phppot-container.main h4,
.phppot-container.main p,
.ui-widget.filter_box h3,
.ui-widget.filter_box h4,
.ui-widget.filter_box p {
    margin:0.25em;
}

.event_filter {
    margin:0 2em 0 0;
}

.people_metrics_btn {
    padding:0 4px !important;
}

/* Report modal */

.report_modal_heading {
    margin:0;
}

.report_modal_event_year,
.report_modal_event_name {
    margin:0.25rem 0;
}

.report_modal_subheading,
.report_modal_viewed_article,
.report_modal_login_holder,
.report_modal_event_attendee {
    color:#2f2f2f;
    margin:0rem 0.5rem;
}

.report_modal_event_name {
    font-weight:bold;
    margin:0.5rem 0;
}

@media all and (max-width: 780px) {
	.phppot-container {
		width: auto;
	}
}

@media all and (max-width: 400px) {
	.phppot-container {
		padding: 0px 20px;
	}
	.tile-container {
		width: auto;
	}
	input, textarea, select {
		width: 100%;
	}
}