.flexTable td,
.flexTable tbody th {
    border-bottom: 1px solid var(--border-light-contrast);
    text-align: left;
    font-weight: inherit;
}

.loading_data_visulization {
    display: none;
}

.table_is_loading_data .loading_data_visulization,
.initial_load .loading_data_visulization {
    display: block;
    background-color: var(--bg-level-3);
    height: 1.5em;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(-45deg, var(--bg-level-3), var(--bg-level-2), var(--bg-level-3));
    background-size: 800% 400%;
    animation: gradient 2s ease infinite;
}

.initial_load .tableHeaderContainer {
    flex-direction: column;   
}

.initial_load .tableHeaderContainer .loading_data_visulization {
    
}

.loading_data_visulization.filter {
    border: 1px solid var(--border-light-contrast);
    margin-top: .7em;
    margin-bottom: 1.4em;
    border-radius: 2px;
    height: 2.4em;
    background: linear-gradient(-45deg, var(--bg-level-2), var(--primary-background), var(--bg-level-2));
}

.initial_load tr td:first-child{
    width: 5em;
}

@keyframes gradient {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.table_is_loading_data .flexCellColumnValue {
        display: none;
}

.flexTable .filter_placeholder {
    display: none;
}

.flexTable .starredItemPlaceholder {
    display: none;
}

.flexTable .tableContainer {

    animation: .3s ease-in-out loadFlexTable;
    animation-fill-mode: forwards;
    transition: opacity .3s ease-in-out;
    position: relative;
    bottom: -5px;
    opacity: .0;
}

@keyframes loadFlexTable {
  0% {
    opactiy: .0;
    bottom: -5px;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    bottom: 2px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}

.flexTable table {
    width: calc(100% - 13px);
    position: relative;
    left: 4px;
}

.flexTable tr.loadingRow {
    opacity: .3 !important;
}

.flexTable tbody .tdPadding,
.flexTable.tdPadding tbody td {
    padding: 1.5em 1em;
    display: block;
    margin: 0px auto;
    background-color: rgba(0,0,0,0);
    transition: background-color .1s;
}

.flexTable.tight tbody .tdPadding,
.flexTable.tight.tdPadding tbody td {
    padding: .6em;
}

.flexTable.tight thead input {
    padding: .3em .5em;
}

.flexTable.tight .searchBox.noInstantSearch .searchBoxContainer,
.flexTable.tight .tableSearchAndOptionsContainer {
    margin-bottom: 0.2em;
}

.flexTable.compactFilters.tight thead th {
    min-height: 0em;
}

.flexTable.tight .searchBox input[type=search] {
    padding: 0em .5em;
}

.flexTable.compactFilters .filtersOn .tableFilters {
    display: none;
}

.flexTable.tdPadding tbody td {
    display: table-cell;
}

.flexTable thead th {
    padding: 15px;
    border-bottom: 1px solid var(--border-light-contrast);
    text-align: left;
    font-weight: 800;
    vertical-align: top;
    white-space: nowrap;
}

.flexTable thead th .midExpandContainer {
	font-weight: initial;
}

.flexTable thead th .tableHeaderContainer {
    display: flex;
}

.flexTable thead th i,
.flexTable .tabelFilters i {
    display: inline;    
}

.flexTable .sortColumn {
    background-color: transparent;
    color: var(--text-default);
    font-weight: 800;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
    text-align: left;
    grid-column-start: 2;
}

.flexTable .sortColumn .fa {
    display: none;
}

.flexTable .sortColumn.active .fa {
    display: inline;
}

.flexTable .searchBoxContainer {
    display: flex;
    margin-bottom: 1em;
}

.flexTable .searchBox.noInstantSearch .searchBoxContainer {
    /* display: grid; */
    grid-template-columns: auto 5em;
    height: auto;
    margin-bottom: 1em;
    align-items: baseline;
}

.flexTable .searchBox input[type=search] {
    width: 100% !important;
    padding: .5em .8em;
    min-height: 3em;
}

.flexTable .searchBox input[type=search]:hover,
.flexTable .searchBox input[type=search]:focus {
  border:2px solid var(--primary-color);
}

.flexTable .searchBox.noInstantSearch .searchBoxContainer {
    display: grid;
    grid-template-columns: auto 5em;
    height: auto;
    margin-bottom: 1em;
    align-items: start;
}

.flexTable .searchBox.noInstantSearch input[type=search] {
    height: 100%;
    min-height: auto;
}

.flexTable .searchBox.noInstantSearch input[type=search] {
    height: 100%;
    min-height: auto;
}

.flexTable .searchBox button {
    border: 1px solid var(--secondary-color) !important;
    width: 5em;
    padding: 0.8em !important;
    box-sizing: border-box;
    margin-left: 0px;
    position: relative;
    font-size: 1em;
    height: 100%;
    width: 100%;
    margin: .3em 0 0 0;
}

@media (min-width: 1400px) {
    .flexTable .searchBox button {
        padding: .9em;
    }
}

.flexTable .searchBox.noInstantSearch .searchBoxContainer {
    display: grid;
    grid-template-columns: auto 5em;
    height: auto;
    margin-bottom: 1em;
    align-items: start;
}

.flexTable .searchBox.noInstantSearch input[type=search] {
    height: 100%;
    min-height: auto;
}

.flexTable .tableFiltersButton, .flexTable .tableOptionsButton {
    background-color: transparent;
    color: var(--text-light);
    padding: 12px;
    border-right: 1px dashed var(--border-light-contrast);
}

.flexTable .tableOptionsButton {
    margin-right: 12px;
    position: relative;
}

.flexTable .tableOptionsButton .needsAttentionDot {
    left: 7px;
    background-color: var(--turquoise);
}

.flexTable .clearFiltersButton {
    padding: 12px;
}

.flexTable .paging {
    color: var(--text-light);
    margin-top: 15px;
}

.flexTable .paging input{
    width: 3em;
    text-align: center;
} 

.flexTable .paging button {
    background-color: transparent;
    padding: 0px .3em;
    color: var(--text-light);
}

.flexTable .paging .load_exact_count {
    position: relative;
    left: -.2em;
    top: -.2em;
    margin: 0px;
    padding: 0px;
}

.flexTable .paging .load_exact_count .hover_text {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    font-size: .8em;
    line-height: .8em;
    z-index: 2;
    padding: 0px;
    color: var(--text-reverse);
}

.flexTable .paging .load_exact_count:hover .hover_text,
.flexTable .paging .load_exact_count:focus .hover_text {
    height: auto;
    width: 10em;
    overflow: hidden;
    padding: .5em .3em;
    background-color: var(--bg-dark-level-1);
    box-shadow: 1px 1px 4px var(--border-shaddow-light);
}

.flexTable .paging .load_exact_count svg {
    fill: var(--text-light);
    height: .7em;
    width: .7em;
}

.flexTable .paging .load_exact_count:hover svg,
.flexTable .paging .load_exact_count:focus svg {
    fill: var(--blue);
}

.flexTable .bulkActions {
    margin-top: 0em;
    text-align: right;
    color: var(--text-light);
}

.flexTable .bulkActions select {
    width: auto;
  box-sizing: border-box;
    padding: .3em .5em;
}

.flexTable .tableSearchAndOptionsContainer {
    margin-bottom: 1em;
}

.flexTable .tableSearchAndOptionsContainer .paging, .flexTable .tableSearchAndOptionsContainer .bulkActions {
    font-size: .9em;
}

.flexTable .paging input {
    padding: .3em;
}

.flexTable .tableSearchAndOptionsContainer .bulkActions {
    float: right;
}

.flexTable .bulkActions button  {
    background-color: var( --primary-background);
    color: var(--text-default);
    border: 1px solid var(--border-dark-contrast);
    padding: .42em .5em;
    position: relative;
    font-size: 1em;
}

.flexTable .bulkActions button:hover,
.flexTable .bulkActions button:focus {
  background-color: var(--bg-dark-level-2);
    color: var(--text-reverse);
}

.flexTable .enabledFilters {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 900px) { 
    .flexTable .enabledFilters {
        display: inline-block;
    }
}

.flexTable .enabledFilters .saveCsvButton {
    margin-left: auto;
}

.flexTableList tbody tr:hover {
    background-color: var(--bg-level-2);
}

.flexTable .tableContainer {
    overflow-x: auto;
    overflow-y: visible !important;
    width: 100%;
    float: left;
    transition: width .3s ease-in-out;
    position: relative; 
    min-height: 26em;
    scrollbar-width: thin;
}

.flexTable .tableFilters {
    overflow-x: hidden;
    overflow-y: auto;
    float: left;
    width: 0px;
    margin-right: 0px;
    font-size: .8em;
    line-height: 1.3em;
    background-color: transparent;
    transition: width .3s ease-in-out, margin-right .3s ease-in-out, height 1s ease-in-out;
}

.flexTable .tableFilters h3 {
    margin-top: 15px;
    color: var(--text-light);
    font-weight: 800;
    font-size: 1.1em;
    letter-spacing: 0em;
    hyphens: auto;
    cursor: pointer;
}

.flexTable .showHideColumnCheckbox {
    float: left;
    margin-bottom: 10px;
    clear: both;
    margin-right: 10px;
    width: 20px;
}

.flexTable .showHideColumnLabel {
    float: left;
    margin-bottom: 10px;
    width: calc(100% - 30px);
}

.flexTable.default br.clear {
	display: none;
}

.flexTable .tableFilters .tableFiltersContainer {
    color: var(--text-light);
    width: var(--panel-width);
    padding: 10px 25px 10px 0;
    overflow: auto;
    position: relative;
    left: -150px;
    transition: left .3s ease-in-out;
}

.flexTable .filtersOn .tableFiltersButton {
    background-color: var(--bg-dark-level-2);
    color: var(--text-reverse);
}

.flexTable .filtersOn .tableFilters {
    width: var(--panel-width);
	padding-right: 2em;
	border-right: 1px solid #cccccc;
	margin-right: 2em;
}

.flexTable .filtersOn .tableFilters .tableFiltersContainer {
    left: 0px;
}

.flexTable .filtersOn .tableContainer {
    width: calc(100% - var(--panel-width) - 2em);
}

.flexTable .tableFilters .filterOption .midExpandContainer,
.flexTable .tableFilters .filterOption .fullExpandContainer{
    display: block;
    max-height: 0px;
    overflow: hidden;
    transition: max-height .7s ease-in-out;
}

.flexTable .filtersCount {
    font-weight: 800;
    padding: 0px 5px;
}

.flexTable .tableFilters .filterOption.midExpand .midExpandContainer,
.flexTable .tableFilters .filterOption.fullExpand .midExpandContainer,
.flexTable .tableFilters .filterOption.fullExpand .fullExpandContainer {
    max-height: 1738px;
}

.flexTable .tableFilters .filterOption.fullExpand .fa-caret-up,
.flexTable .tableFilters .filterOption .fa-caret-down,
.flexTable .tableFilters .filterOption.midExpand .fa-angle-double-down {
    display: inline;
}

.flexTable .tableFilters .filterOption.midExpand .fa-caret-up, 
.flexTable .tableFilters .filterOption .fa-caret-up, 
.flexTable.filtersOnTop .tableFilters .filterOption .fa-caret-down, 
.flexTable .tableFilters .filterOption.midExpand .fa-caret-down,
.flexTable .tableFilters .filterOption.fullExpand .fa-caret-down,
.flexTable .tableFilters .filterOption .fa-angle-double-down,
.flexTable .tableFilters .filterOption.fullExpand .fa-angle-double-down {
    display: none;
}

.flexTable .tableFilters .filter {
    padding-bottom: 10px;
}

.flexTable .tableFilters .filterOption {
    border-bottom: 1px dashed #cccccc;
}

.flexTable .tableContainer .loadingContainer {
    width: 100%;
    background-color: rgba(255, 255, 255, .9);
    background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    color: #5E5E5E;
    text-align: center;
    height: auto;
    padding: 53px 0 513px 0;
    overflow: hidden;
    transition: height .7s ease-in-out, padding .7s ease-in-out;
    position: absolute;
}

.flexTable .tableContainer .loadingContainer.off{
    height: 0px;
    padding: 0px;
}

.flexTable .selectAllContainer {
    position: relative;
    text-align: center;
}

.flexTable .selectAllContainer .toolTip{
    right: 2px;
    top: 46px;
    text-align: left;
    left: auto;
    background-color: var(--bg-dark-level-2);
}

.flexTable .selectAllContainer .toolTip button {
    text-align: left;
}

.flexTable .selectAllContainer .toolTipPointer{
    top: -4px;
    right: 17px;
    left: auto;
    background-color: var(--bg-dark-level-2);
}

.flexTable .filterCheckbox .checkLabel {
    min-width: 1em;
}

.flexTable .tableFilters button {
    font-size: 1em;
    margin-bottom: .5em;
}

.flexTable .tableFilters input[type="text"],
.flexTable .tableFilters input[type="date"],
.flexTable .tableFilters input[type="search"],
.flexTable .tableFilters select {
    margin-bottom: 1em;
    padding: .8em;
    width: 90%;
    width: calc(100% - 1.6em - 4px);
    font-family: 'Roboto', sans-serif;
}

.flexTable .tableFilters input[type="text"]:focus,
.flexTable .tableFilters input[type="date"]:focus,
.flexTable .tableFilters input[type="search"]:focus,
.flexTable .tableFilters select:focus {
    border: 2px solid var(--primary-color);
;
}

.flexTable .tableFilters input[type="search"] {
    width: 100%;
}

.flexTable .tableFilters select {
    width: 100%;
    border: 1px solid var(--border-dark-contrast);
}

.flexTable .loadSavedFilter, .flexTable .deleteSavedFilter {
    cursor: pointer;
}

.flexTable .savedFilterContainer {
    margin-bottom: 8px;
}

.flexTable .filterOption.on h3 {
    color: var(--text-default);
}

.flexTable .saveFilterButton {
    font-size: 1.4em;
}
    
.flexTable td.alignCenter,
.flexTable th.alignCenter {
    text-align: center;
}

.flexTable td.alignRight,
.flexTable th.alignRight {
    text-align: right;
}

.flexTable tr.selected td,
.flexTable tr.selected th {
    background-color: var(--bg-level-2);
}

.flexTable .smartSearch {
    border: 1px solid var(--border-light-contrast);
    position: absolute;
    background-color: var(--primary-background);
    z-index: 1;
    width: 77%;
    box-shadow: 1px 1px 4px var(--border-shaddow-lightest);
    display: none;
}

.flexTable .smartSearch ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.flexTable .smartSearch ul li{
    padding: 6px;
    color: var(--text-light);
    cursor: pointer;
}

.flexTable .smartSearch ul li:hover{
    background-color: var(--bg-level-2);
}

.flexTable .smartSearch ul li:focus{
    background-color: var(--bg-level-3);
}

.flexTable .flexTableMessageRow td {
    padding: 10px;
    color: var(--text-light);
    font-style: italic;
    font-size: .85em;
    border-bottom: 1px dashed var(--border-lighter-contras);
}

.flexTable .closeMatchRow {
    opacity: .65 !important;
}

.flexTable .highlightedTerm {
    font-weight: 800;
}

.flexTable .cachedResults{
    color: var(--text-reverse-light);
    font-style: italic;
    font-size: .9em;
}

.flexTable .cachedResults button{
    color: var(--text-reverse-light);
    font-style: italic;
    font-size: .9em;
    background-color: transparent;
}
.flexTable .refreshCacheMessage{
    opacity: 0;
    transition: opacity .7s ease-in-out;
}

.flexTable .tableSearchAndOptionsContainer .refreshCacheMessage{
    margin-left: 15px;
}

.flexTable .refreshCache .refreshCacheMessage{
    opacity: 1;
    transition: opacity .7s ease-in-out;
} 

.flexTable .enabledFilters button {
    background-color: var(--bg-level-3);
    color: var(--text-light);
    margin: 10px 10px 5px 0;
}

.flexTable .enabledFilters .has_advanced_filters .non_advanced_filter button {
    text-decoration: line-through;
}

.flexTable th .removeColumn {
    background-color: transparent;
    color: var(--text-default);
    display: inline;
    padding: 0;
    align-self: start;
    display: none;
}

.flexTable thead th .removeColumn i {
    opacity: 0.3;
}

.flexTable thead th .removeColumn:hover i {
    opacity: 1;
}

.flexCellColumnName:after {
    content: ":";
}

.flexCellColumnName {
    font-weight: 600;
    display: none;
}

.flexTable .selectAllToolTip {
    left: 2px;
    top: 60px;
    position: absolute;
    z-index: 2;
      white-space: normal;
}

.flexTable .hideShowColumnOptions .reStyleCheckBoxInput + label .reStyleCheckBox i{
    display: inline;
}

.flexTable .hideShowColumnOptions .reStyleCheckBoxInput:checked + label .reStyleCheckBox i{
    display: none;
}

.flexTable .selectAllToolTip .toolTipContainer {
    display: grid;
    text-align: left;
    grid-template-columns: 1fr 6fr;
    grid-column-gap: 10px;
    grid-row-gap: 13px;
    background-color: var(--bg-dark-level-2);
    color: var(--text-reverse);
    font-weight: 400;
    width: 160px;
    box-shadow: 1px 1px 7px var(--border-shaddow-light);
    line-height: 1.1em;
    height: 0px;
    padding: 0px;
    overflow: hidden;
    transition: all .1s cubic-bezier(.84,.76,1,1.38);
    position: relative;
    z-index: 2;
}

.flexTable .selectAllToolTip .toolTipBck {
    background-color: transparent;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.flexTable .selectAllToolTip.on .toolTipContainer {
    padding: 15px;
    height: 150px;
}


.flexTable .selectAllToolTip.on .toolTipBck {
    display: block;
}

.flexTable .selectAllToolTip .toolTipPointer {
    top: -5px;
    left: 17px;
    background-color: var(--bg-dark-level-2);
    display: none;
}

.flexTable .selectAllToolTip.on .toolTipPointer {
    display: block;
}

.flexTable .tableMessages {
    max-height: 0px;
    overflow: hidden;
    transition: all 1s cubic-bezier(.84,.76,1,1.38);
}

.flexTable .tableMessages.on {
    max-height: 1000px;
}

.flexTable thead th .midExpandContainer {
    display: none;
}

.flexTable thead th.locked .tableHeaderContainer {
    grid-template-columns: 0px auto;
    grid-column-gap: 0px;
}

.flexTable .noData {
    border: 1px solid var(--border-lighter-contrast);
    padding: 10px;
    margin: 15px auto;
    font-style: italic;
}

/* visually hide some components */
.flexTable caption,
.flexTable .customFilterLabel,
.flexTable .flexTableSelectBox .checkLabel  {
    position: absolute;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

.starredItems .checkLabel img {
    display: block;
    overflow: visible;
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    
}

.tableFilters[aria-hidden="true"] .filterOption {
    display: none;
}

.flexTable .flex_column_id {
    width: 3em;
}

.flexTable.usesExternalFilters .fuzzyMatches {
    display: none;
}

/* EMS flextable */
.flexTableButton.WasInvitationSent button,
.flexTableButton.WasReminderSent button,
.flexTableButton.WasConfirmationSent button,
.flexTableButton.WereRegretsSent button
 {
    background-color: transparent;
}

/* flextable listonly */

.flexTable.listOnly .tableFilters,
.flexTable.listOnly .tableSearchAndOptionsContainer,
.flexTable.listOnly .removeColumn {
    display: none;    
}

.flexTable.listOnly .filtersOn .tableContainer {
    width: 100%;
    min-height: 1em;
}
    
.flexTable.listOnly thead th .tableHeaderContainer {
    grid-template-columns: 0px auto;
    grid-column-gap: 0px;
}

/* end flextable listonly */

/* flextable listonly simpleSearch*/

.flexTable.listOnly.simpleSearch .tableFiltersButton,
.flexTable.listOnly.simpleSearch .tableOptionsButton {
    display: none;
}

.flexTable.listOnly.simpleSearch .tableSearchAndOptionsContainer {
    display: block;
}

/* end flextable listonly */

/* flextable filters on top */
    .flexTable.filtersOnTop .tableFilters {
        width: calc(100% - 2em);
        margin-right: 0px;
        padding: 2em;
        background-color: var(--bg-level-2);
        margin-bottom: 1em;
        padding: 1em;
        padding-top: 0px;
        padding-bottom: 0px;
        overflow: visible;
        transition: all .2s cubic-bezier(.84,.76,1,1.38);
    }

    .flexTable.filtersOnTop .tableFilters .tableFiltersContainer {
        width: 100%;
        background: none;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-column-gap: .8em;
        grid-row-gap: .8em;
        left: 0px;
        padding: 0px;
        border: none;
    }

    .flexTable.filtersOnTop .filterOption,
    .flexTable.filtersOnTop .tableFilters .tableFiltersContainer {
        overflow: visible;
    }

    .flexTable.filtersOnTop .flexTableContainer.filtersOn .tableFilters {
        padding-top: 1em;
        padding-bottom: 1em;
        float: none;
        position: relative;
        border: 1px solid var(--border-dark-contrast)
    }

    .flexTable.filtersOnTop .tableFilters .filterOption {
        border-bottom: none;
        position: relative;
        border-radius: 4px;
        padding: .8em .8em;
        background-color: var(--bg-level-2);
        box-shadow: 0 0 8px rgba(0, 0, 0, .09);
        line-height: 0;
    }

    .flexTable.filtersOnTop .tableFilters .filterOption label {
        line-height: 1em;
        display: block;
        margin-top: .7em;
    }  

    .flexTable.filtersOnTop .tableFilters .filterOption .filterChecbox label {
        margin-top: 0em;
     }

    .flexTable.filtersOnTop .tableSearchAndOptionsContainer {
        margin-bottom: 0px;
    }

    .flexTable.filtersOnTop .tableFilters h3 {
        margin-bottom: .1em;
        margin-top: 0em;
        color: var(--text-default);
    }

    .flexTable.filtersOnTop .enabledFilters {
        background-color: transparent;
        padding: .5em .7em;
        width: calc(100% - 1.4em);
    }

    .flexTable.filtersOnTop .flexTableContainer.filtersOn .enabledFilters {
        background-color: var(--bg-level-2);
        border: 1px solid var(--border-dark-contrast);
        border-bottom: none;
        position: relative;
        top: 8px;
        z-index: 1;
        margin-left: 0px;
    }

    .flexTable.filtersOnTop .enabledFilters button {
        background-color: var(--primary-color);
        color: var(--text-reverse-static);
    }

    .flexTable.filtersOnTop .tableFilters .filterOption.fullExpand .fa-caret-up {
        display: none;
        top: 4.5em;
    }

    .flexTable.filtersOnTop .tableFilters .filterCheckBoxContainer {
        max-height: 0em;
        overflow: hidden;
    }

    .flexTable.filtersOnTop .tableFilters .filterOption:hover .filterCheckBoxContainer {
        padding: .8em;
        border: 1px solid var(--border-light-contrast);
        position: absolute;
        background-color: var(--primary-background-transparent);
        box-shadow: 1px 2px 7px var(--border-shaddow-lightest);
        min-width: 18em;
        z-index: 2;
        white-space: initial;
        top: 3em;
        max-height: 100em;
        overflow: auto;
    }

    .flexTable.filtersOnTop .tableFilters .filterOption .midExpandContainer,
    .flexTable.filtersOnTop .tableFilters .filterOption .fullExpandContainer{
        max-height: auto;
        overflow: visible;
        max-height: 2000px;
        position: relative;
    }

    .flexTable.filtersOnTop .tableFilters .midExpandContainer:hover .filterCheckBoxContainer,
    .flexTable.filtersOnTop .tableFilters .midExpandContainer:focus .filterCheckBoxContainer {
        display: block;
    }

    .flexTable.filtersOnTop .tableFilters .filterOption .starredItems .filterCheckBoxContainer,
    .flexTable.filtersOnTop .tableFilters .filterOption .starredItems .filterCheckBoxContainer:hover {
        display: block;
        position: relative;
        top: 0px;
        border: 0px;
        box-shadow: none;
        background-color: transparent; 
        max-height: 200em;
        padding: 1em;
    }

    .flexTable.filtersOnTop .tableFilters .starredItems .filter .filterCheckbox {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .flexTable.filtersOnTop .filtersOn .tableContainer {
        width: 100%;
    }

    .flexTable.filtersOnTop .filtersOn .tableFiltersButton {
        background-color: var(--bg-level-2);
        color: var(--text-light);
        position: relative;
        top: .6em;
        border: 1px solid var(--border-dark-contrast);
        border-bottom: 0px;
        z-index: 2;
    }
        
    .flexTable.filtersOnTop th .filter_placeholder {
        display: none;
    }

    @media (max-width: 560px) {
        .flexTable.filtersOnTop .tableFilters .tableFiltersContainer {
            grid-template-columns: 1fr 1fr;
        }

        .flexTable.compactFilters .filter_expanded .midExpandContainer.is_close_to_right,
        .flexTable.filtersOnTop .tableFilters .filter_expanded .midExpandContainer.is_close_to_right {
            right: -3em;
        }

        .flexTable.filtersOnTop .tableFiltersButton,
        .flexTable.filtersOnTop .tableOptionsButton {
            margin-bottom: 0px;
        }
        
    }
/* end flextable filters on top */

/* flextable compactFilters */

    .flexTable.compactFilters .tableContainer,
    .flexTable.compactFilters .filtersOn .tableContainer {
        width: 100%;
    }

    .flexTable.compactFilters .filterCheckBoxContainer {
        width: 0px;
        overflow: hidden;
        opacity: 0;
        position: absolute;
    }

    .flexTable.compactFilters .sortColumn {
        align-self: start;
    }

    .flexTable.compactFilters .starredItemPlaceholder {
        display: block;
        margin-top: 1em
    }

    .flexTable.compactFilters thead th {
        min-height: 2.5em;
    }

    .flexTable.compactFilters thead th:hover .filterCheckBoxContainer,
    .flexTable.compactFilters thead th:focus .filterCheckBoxContainer {
        display: block;
        position: absolute;
        background-color: var(--primary-background-transparent);
        padding: 15px;
        box-shadow: 1px 2px 7px var(--border-shaddow-light);
        font-weight: initial;
        border: 1px solid var(--border-light-contrast);
        z-index: 1;
        width: auto;
        overflow: visible;
        opacity: 1;
    }

    .flexTable.compactFilters thead th .midExpandContainer {
        padding-top: 3px;
        display: block;
        position: relative;
        width: auto;
    }

    .flexTable.compactFilters thead th .midExpandContainer.focused {
        border: 1px solid var(--border-light-contrast);
        padding: .5em;
    }

    .flexTable .applyFilterButton {
        margin-bottom: .5em;
    }

    .flexTable.compactFilters thead th .customFilter {
        margin-bottom: 0px;
        width: 100%;
        min-width: 4em;
    }

    .flexTable.compactFilters thead th .customFilter:focus {
        border: 2px solid var(--primary-color);
    }


    .flexTable.compactFilters thead th {
        padding-bottom: 0px;
    }

    /* date/range popup css. Includes css for filters on top view */  

    .flexTable.compactFilters .filter_placeholder_container .midExpandContainer,
    .flexTable.filtersOnTop .tableFilters .filter_placeholder_container .midExpandContainer {
        max-height: 0em;
        overflow: hidden;
        width: 12em;
        position: absolute;
        transition: none;
        padding-top: 0px;
    }
    
    .flexTable.compactFilters .filter_placeholder_container .midExpandContainer:hover,
    .flexTable.filtersOnTop .filter_placeholder_container .midExpandContainer:hover,
    .flexTable.filtersOnTop .tableFilters .filter_placeholder_container .midExpandContainer:hover,
    .flexTable.compactFilters .filter_placeholder_container:focus-within .midExpandContainer,
    .flexTable.filtersOnTop .filter_placeholder_container:focus-within .midExpandContainer,
    .flexTable.filtersOnTop .tableFilters .filter_placeholder_container:focus-within .midExpandContainer,
    .flexTable.compactFilters .filter_expanded .midExpandContainer,
    .flexTable.filtersOnTop .tableFilters .filter_expanded .midExpandContainer {
        position: absolute;
        padding: .8em;
        border: 1px solid var(--border-light-contrast);
        position: absolute;
        background-color: var(--primary-background-transparent);
        box-shadow: 1px 2px 7px var(--border-shaddow-lightest);
        min-width: 18em;
        z-index: 2;
        white-space: initial;
        top: 2.5em;
        max-height: 100em;
        overflow: auto;
    }

    .flexTable.filtersOnTop .tableFilters .filter_placeholder_container .midExpandContainer:hover,
    .flexTable.filtersOnTop .tableFilters .filter_placeholder_container:focus-within .midExpandContainer,
    .flexTable.filtersOnTop .tableFilters .filter_expanded .midExpandContainer {
        min-width: calc(100% - 3em - 2px);
        top: 2em;
    }

    .flexTable.compactFilters .midExpandContainer.is_close_to_right,
    .flexTable.filtersOnTop .tableFilters .midExpandContainer.is_close_to_right {
        right: 0em;
    }

    .flexTable.compactFilters th {
        position: relative;
    }

    .flexTable.compactFilters .filter_placeholder_container.filter_expanded .filterCheckBoxContainer,
    .flexTable.filtersOnTop .tableFilters .filter_placeholder_container.filter_expanded .filterCheckBoxContainer {
        display: block;
        position: relative;
        border: 0px;
        box-shadow: none;
        padding: .8em 0;
        width: 100%;
        top: 0px;
    }
    
    .flexTable.filtersOnTop .filter_placeholder,
    .flexTable.compactFilters .filter_placeholder {
        display: block;
        border: 1px solid var(--border-dark-contrast);
        padding: .8em;
        margin-top: .4em;
		margin-bottom: 1em;
        font-weight: 400;
        height: 1.3em;
        min-width: 2em;
        overflow: hidden;
        background-color: var(--primary-background);
        line-height: 1.3em;
    }

    /* end date/range popup css. */  


    .flexTable.compactFilters .filtersOn .tableFiltersButton {
        display: none;
    }

/*end flextable compactFilters */

/*begin flextable flexTableBlock */
.flexTable.flexTableBlock .tableSearchAndOptionsContainer input, 
.flexTable.flexTableBlock .tableSearchAndOptionsContainer select,
.flexTable.flexTableBlock .tableSearchAndOptionsContainer textarea, 
.flexTable.flexTableBlock .tableSearchAndOptionsContainer button, 
.flexTable.flexTableBlock .tableSearchAndOptionsContainer .redHightlightButton,
.flexTable.flexTableBlock .paging input, 
.flexTable.flexTableBlock .paging select, 
.flexTable.flexTableBlock .paging textarea, 
.flexTable.flexTableBlock .paging button, 
.flexTable.flexTableBlock .paging .redHightlightButton,
.flexTable.flexTableBlock .bulkActions input, 
.flexTable.flexTableBlock .bulkActions select, 
.flexTable.flexTableBlock .bulkActions textarea, 
.flexTable.flexTableBlock .bulkActions button, 
.flexTable.flexTableBlock .bulkActions .redHightlightButton {
    width: auto !important;
}

.flexTable.flexTableBlock .tableSearchAndOptionsContainer input[type="search"]{
    width: 100% !important;
} 

.flexTable.flexTableBlock .paging.top, 
.flexTable.flexTableBlock .bulkActions.top,
.flexTable.flexTableBlock .tableFiltersButton,
.flexTable.flexTableBlock .tableFilters,
.flexTable.flexTableBlock table thead {
    display: none;
}

.flexTable.flexTableBlock table,
.flexTable.flexTableBlock .filtersOn .tableContainer {
    width: 100%;
    overflow-x: initial;
}

.flexTable.flexTableBlock .paging input {
    width: 30px !important;
    padding: 7px !important;
    text-align: center;
}

.flexTable.flexTableBlock .paging button {
    padding: 4px;
}

.flexTable.flexTableBlock .tableFilters {
    font-size: 1em;
}

.flexTable.flexTableBlock .saveFilterButton {
    margin: 0px;
    padding-top: 3px;
    padding-bottom: 4px;
}

.flexTable.flexTableBlock .tableFilters button {
    margin: 0px;
}

.flexTable.flexTableBlock .searchBox button {
    padding-top: 3% !important;
    padding-bottom: 3% !important;
}

.flexTable.flexTableBlock tr {
    display: grid;
    grid-template-columns: 30% auto;
    border-bottom: 1px solid var(--border-shaddow-lightest);
    padding-bottom: 20px;
    margin-bottom: 20px;
    grid-column-gap: 20px;
}

.flexTable.flexTableBlock td,
.flexTable.flexTableBlock tbody th {
    border-bottom: none;
    text-align: left;
    display: block;
    grid-column-start: 2;
    border-left: 1px dashed var(--border-shaddow-lightest);
    padding-left: 20px;
}

.flexTable.flexTableBlock td .flexCellColumnName,
.flexTable.flexTableBlock tbody th .flexCellColumnName {
    display: block;
    font-size: 1.1em;
}

.flexTable.flexTableBlock tbody th .flexCellColumnName {
    font-weight: 400;
}

.flexTable.flexTableBlock tbody th {
    font-size: 1.5em;
    line-height: 1.3em;
    font-weight: 800;
    padding-bottom: 10px;
    grid-column-start: 1;
    padding-left: 0px;
    border-left: none;
}

.flexTable.flexTableBlock .selectAllContainer {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: left;
}

.flexTable.flexTableBlock td .tdPadding,
.flexTable.flexTableBlock tbody th .tdPadding {
    padding: 8px 0px;
}

.flexTableList tbody tr:hover,
.flexTableList tbody th:hover {
    background-color: transparent;
}

/*end flextable flexTableBlock */

.flexTable .ems-builder-logic fieldset {
    padding: 1.5em;
}

.flexTable .ems-builder-logic .or_label {
    background-color: var(--bg-level-2);
    padding: 1em;
    text-align: center;
}

.flexTable .limited_data_set {
    padding: 1em 0;
}

.flexTable .limited_data_set h3,
.flexTable .limited_data_set p {
    font-size: 1em;
    font-style: italic;
    display: inline;
    position: relative;
}

.flexTable .limited_data_set .needsAttentionDot {
    left: 0px;
    right: 0px;
    position: relative;
    display: inline-block;
    background-color: var(--turquoise);
}

.flexTable .limited_data_set button {
    padding: .3em .5em;
    font-size: 1em;
    background-color: transparent;
    color: var(--text-default);
    border: 1px solid transparent;
}

.flexTable .limited_data_set button:focus,
.flexTable .limited_data_set button:hover {
    background-color: var(--bg-level-2);
    border: 1px solid var(--border-darker-contrast);
}

.flexTable .limited_data_set button svg {
    fill: var(--text-default);
    top: -.1em;
    position: relative;
}

.flexTable .limited_data_set button.flex_load_more_button {
	background-color: var(--bg-lightest-contrast-turquoise);
	border: 1px solid var(--turquoise);
}

.flexTable .limited_data_set button.flex_load_more_button:focus,
.flexTable .limited_data_set button.flex_load_more_button:hover {
	background-color: var(--turquoise);
	color: var(--text-reverse-static);
}

.flexTable .limited_data_set button.flex_load_more_button svg {
    fill: var(--turquoise);
}

.flexTable .limited_data_set button.flex_load_more_button:hover svg,
.flexTable .limited_data_set button.flex_load_more_button:focus svg {
    fill: var(--text-reverse-static);
}

/* flextable responsive breakpoints */
@media (max-width: 560px) { 
    .redHightlightButton{
        margin:.5em 0;
    }
    
    .flexTable .tableSearchAndOptionsContainer input, 
    .flexTable .tableSearchAndOptionsContainer select, 
    .flexTable .tableSearchAndOptionsContainer textarea, 
    .flexTable .tableSearchAndOptionsContainer button, 
    .flexTable .tableSearchAndOptionsContainer .redHightlightButton,
    .flexTable .paging input, 
    .flexTable .paging select, 
    .flexTable .paging textarea, 
    .flexTable .paging button, 
    .flexTable .paging .redHightlightButton,
    .flexTable .bulkActions input, 
    .flexTable .bulkActions select, 
    .flexTable .bulkActions textarea, 
    .flexTable .bulkActions button, 
    .flexTable .bulkActions .redHightlightButton,
    .flexTable .flexCellColumnValue{
        width: auto !important;
    }
    
    .flexTable.flexTableBlock .tableSearchAndOptionsContainer input[type="search"]{
        width: 100% !important;
    } 
    
    .flexTable .paging.top, .flexTable .bulkActions.top {
        display: none;
    }
    
    .flexTable .paging input {
        width: 30px !important;
        padding: 7px !important;
        text-align: center;
    }
    
    .flexTable .paging button {
        padding: 4px;
    }
    
    .flexTable .tableFilters {
        font-size: 1em;
    }
    
    .flexTable .saveFilterButton {
        margin: 0px;
        padding-top: 3px;
        padding-bottom: 4px;
    }
    
    .flexTable .tableFilters button {
        margin: 0px;
    }

    .flexTable .searchBox button {
        padding-top: 3% !important;
        padding-bottom: 3% !important;
    }

    .flexTable tr,
    .flexTable.flexTableBlock tr,
    .flexTable tbody th,
    .flexTable.flexTableBlock tbody th {
        display: grid;
        grid-template-columns: 15px auto;
        border-bottom: 1px solid var(--border-shaddow-lightest);
        padding-bottom: 20px;
        margin-bottom: 20px;
        grid-column-gap: 10px;
    }

    .flexTable td,
    .flexTable.flexTableBlock td,
    .flexTable tbody th,
    .flexTable.flexTableBlock tbody th {
        border-bottom: none;
        text-align: left;
        display: block;
        grid-column-start: 2;
        border-left: 0px;
        padding-left: 0px;
    }

    .flexTable td .flexCellColumnName,
    .flexTable tbody th .flexCellColumnName {
        display: inline;
    }

    .flexTable tbody th .flexCellColumnName {
        font-weight: 400;
    }

    .flexTable td.flexTableSelectBox,
    .flexTable tbody th.flexTableSelectBox {
        grid-column-start: 1;
    }

    .flexTable td.starredItemData,
    .flexTable tbody th.starredItemData {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    .flexTable tbody th {
        font-size: 1.5em;
        line-height: 1.3em;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .flexTable thead tr {
        display: flex;
        grid-template-columns: 50% 50%;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .flexTable .sortColumn {
        padding: 5px 10px;
        border-radius: 6px;
        font-weight: 400;
        border: 1px solid var(--border-shaddow-lightest);
        padding: 5px 10px;
        border-radius: 6px;
    }

    .flexTable .sortColumn.active {
        background-color: var(--bg-level-3);
    }

    .flexTable thead th {
        padding: 4px 4px;
        border-bottom: none;
    }

    .flexTable thead th button {
        margin: 0px;
    }

    .flexTable thead th .tableHeaderContainer {
        grid-column-gap: 5px;
    }

    .flexTable .selectAllContainer {
        grid-column-start: 1;
        grid-column-end: 4;
        text-align: left;
    }

    .flexTable td .tdPadding,
    .flexTable tbody th .tdPadding {
        padding: 3px 0px;
    }

    .flexTableContainer table {
        display: flex;
        flex-direction: column;
    }
    
    .flexTableContainer table tbody {
        order: -1;
    }
}
