/* this is having side effects on LARGER page.  Hiding and applying to TABLE tag:
body {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
*/

/* override content.css table,tr,td,th rule. !!! update content.css to this. NOTE opensans is included in page template */
table,tr,td,th {
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
}

.events-table tbody td {
    border-top: 2px solid #ccc;
}

.events-header {
    text-align: left;
	font-size: 3rem;
    color: #b59929;
}


/* Filters Wrappers and styles */

.searchFilter {
	padding: 10px;
}

.searchFilter LABEL {
	font-weight: bold;
}

.searchFilter INPUT {
	width: 220px;
	margin: 0 0 0 4px;
}



.eventFilters {  /* contains search and all filters */
    background-color: #d9e0e9;
    border-radius: 8px;
    margin: 0;
    padding: 10px;
    font-size: 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.moreFilters {
    display: flex;
	flex-flow: column;
    align-items: flex-start;
	flex-wrap: wrap;
	/*border: #aaa 1px solid;
  padding: 20px 30px;
  margin: 10px; */
}

.moreFilters fieldset {
	padding: 10px 10px;
	margin: 10px 0;
	border: 2px solid #ccc;
}

.moreFilters legend {
	font-weight: bold;
	padding: 4px 4px;
	margin-left: -6px;
}

.moreFiltersCountryState {
  
}
.moreFiltersEventType {
 
}

.moreFiltersDataRangeLabel {
  
}


@media only screen and (max-width: 640px) {
  .eventFilters {  /* swap to column */
      flex-flow: column;
  }
}

.dataTables_filter > label { /* filter labels */
	font-size: 14px;
	line-height: 100%;
	padding:0;
	margin:0;
}

#filtersSection {
	font-weight: bold;
	font-size: 120%;
	XXborder-left:3px #ccc solid;
}

td.details-control {
    background: url('details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('details_close.png') no-repeat center center;
}



.ui-datepicker-trigger img {
    height: 20px;
}
.ui-datepicker-trigger {
    margin-right: 10px !important;
}
eventFilters input,
eventFilters select {
    height: 25px;
    margin-left: 10px !important;
}
eventFilters button,
eventFilters input,
eventFilters select,
eventFilters textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
eventFilters button,
eventFilters input,
eventFilters optgroup,
eventFilters select,
eventFilters textarea {
    font: inherit;
    color: inherit;
	
	border-radius: 4px;  
    border: 2px solid #bbb;
    margin: 4px;
}
eventFilters button,
html eventFilters input[type='button'],
button,
select {
    text-transform: none;
}
button {
    overflow: visible;
		
	padding: 2px;
    margin: 0px 4px;
    background: #f9e7b3;
    border: 2px #aaa solid;
    border-radius: 4px;
}

.eventDescriptionColumn button {
	background:#fff;
}
/* END Filter row */

/* social media link icon styles */
.dataTableSortSocialIcon {
	padding:0;
	margin:0;
	width:32px;
	height:32px;
	border:none;
	border-bottom: 2px transparent solid;
}

.dataTableSortSocialIcon:hover
{
	border-bottom: 2px #ca6 solid;
}

/* Data Table Style */
#data-table {
padding:20px 0;
margin: 0 0;  /* override default margin:0 auto which centers it */
}

#data-table td,
.table > thead > tr > th {
    vertical-align: top;
	line-height: 1.3em;  /* SS mod - needed in noFrames version to remove css conflicts with jwst site css */
	
	padding-top: 12px; /* add a little white space to lines, easier on the eyes */
}


div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}

.dataTable th {
    text-align: left;
}

.dataTable th:nth-of-type(9),
.dataTable td:nth-of-type(9) {
    /* text-transform: uppercase; */
}

/* SS - override default which is 750px, way to narrow.  Let the hosting page's "slot" for this determine width and content determine height  */
.events-container {
    width: 100%;
}

/* SS - hide these columns always */

/* .dataTable td:nth-of-type(7),
.dataTable th:nth-of-type(7),
.dataTable td:nth-of-type(6),
.dataTable th:nth-of-type(6),
.dataTable td:nth-of-type(3),
.dataTable th:nth-of-type(3) {
    display: none;
} */

/* SSabia - UI graphics overrides point to local graphics in local images dir */

/* unsorted */
table.dataTable thead .sorting {
   background-image: url("images/sortArrowsUnsortedColumn.png");
}
/* ASCENDING (the active sort column dir) */
table.dataTable thead .sorting_asc {
   background-image:url("images/sortArrowsAscending.png");
	}
/* HIGHTLIGHT DESCENDING (the active sort column dir) */
table.dataTable thead .sorting_desc {
   background-image:url("images/sortArrowsDescending.png");
	}

/* Override  for the EXPAND entry icon */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
   top:20px;
   left:0;  /* was 25%; */
   height:.9em;
   width:.9em;
   /* margin-top:-9px; no effect? */
   display:block;
   position:absolute;
   color:#000;
   border:2px solid #ccc;
   border-radius:1em;
   box-shadow:unset;
   box-sizing:content-box;
   text-align:center;
   text-indent:1px !important;
   font-size:2.0em;
   font-family:arial black, arial, "Courier New",Courier,monospace;
   font-weight:bold;
   line-height:75%;
   content:"\0025be"; /* was +, 25b8 right arrow, 25be down, 25b4 up */
   background-color:#f9e7b3;
}

/* collapse icon state */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    content: "\0025b4"; /* was - */;
    background-color: #FCCC45;
}

/* Odd row override */
table.dataTable tbody tr.odd {
	background:  #eee;
}

/* Override to put column sort ICON to LEFT of column heading so it doesn't get confused with next column when it's default placement (to right edge of column) AND  open up padding room for icon left of heading */
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {

  background-position: center left !important;
  padding-left: 25px;  
}

/* # entries elements */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info {
      color:#888;
	  font-size:1.0em;
  }


.dataTables_wrapper .dataTables_info { /* Tweek position of "Showing X of Y Entries"  to LEFT side on desktop since we moved it to top in code and stack for mobile */
    float: left;
    padding-top: 0;
}
.dataTables_wrapper .dataTables_length {/* Tweek position of "Show X Entries"  to RIGHT side on desktop since we moved it to top in code and stack for mobile */
    float: right;
    padding-top: 0;
}

/* Stack "Show # Entries" and  "Showing X of Y Entries" below this breakpt */
@media screen and (max-width: 640px){
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info {
      float: none;
      text-align: center;
  }
}

/* Overrides for better layout of mobile collapsed/expanded row entries */
table.dataTable>tbody>tr.child ul.dtr-details>li {  /* center title and content horizontally */
	display: flex;
    align-items: center;
}

/* add a little padding to titles */
table.dataTable>tbody>tr.child span.dtr-title {
	padding-right: 10px;
}


@media only screen and (max-width: 850px) {
    eventFilters {
        flex-direction: column;
        align-items: flex-start;
    }
    eventFilters span {
        display: inline-block;
        width: 53px;
        margin-bottom: 10px;
    }
    eventFilters #state select {
        margin-left: 10px !important;
        display: inline-block;
    }
    eventFilters #online select {
        margin-left: 2px !important;
        display: inline-block;
    }
}

/* COLUMN SPECIFIC CLASSES defined/applied to columns in the DataTables doc.ready start up code columns[] defs 
  !!!NOTE: widths in the columns[] def are a "suggestion" to dataTables if it has enough room else it auto shrinks but by assinging classNames to columns[]  w set min width here and the forces a min-width as desired.   The sum of these for the important LEFT most columns is then used in concert with a TABLE container size MIN-width to force dataTables into resp/mobile mode and collapse the unimportant rightmost columns.  This simplifies the visual field for our users. Then can then access the collapsed columns by expanding the row.
*/

.dataTableMaxWidthToHideRightColumns {
		max-width: 800px;  /* sum of the important leftmost columns min-widths */
}

.dateTimeLocalColumn{
	min-width: 100px;  /* force dataTables to shrink this no less than this */
	width:100px;
	max-width: 100px;	 /* this is for mobile mainly to for force dataTables to shrink this enough to show both date and institution  which it wont do if not contrained like this. */
}

.institutionColumn {
	min-width: 100px;  /* force dataTables to shrink this no less than this */
}

.eventDescriptionColumn {
	min-width: 250px;  /* force dataTables to shrink this no less than this */
}

.eventAddressColumn {
	min-width: 150px;  /* force dataTables to shrink this no less than this */
}