/* ---------------------- Variables ---------------------- */
#vin-search {
    --bg-color: #eeeeee;
}
#vin-search-results > .footable_parent {
    --num-cols: 2;
    --icon-font-size: 1em;
    --icon-font-weight: 400;
    --status-color: inherit;
}

/** Old Digital Hill Styles **/
#vin-search input { padding:8px 24px; text-align:center; margin-bottom: 10px; }
#vin-search { padding:24px; text-align:center; }
#vin-search-submit {
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: white;
    background-color: black;
    padding: 9px 20px;
    margin-left: 10px;
    margin-bottom: 10px;

}
#vin-search-submit:disabled {
    background: gray;
}
.ninja-footable-loader .footable-empty {
    color: transparent;
    width: 1px;
    height: 56px;
    display: block;
    position: relative;
    opacity: 1;
}
.ninja-footable-loader .footable-empty::before {
    content: "Loading...";
    color: black;
    font-size: 0.9;
    font-weight: normal;
    text-align: left;
    display: inline-block;
    margin-top: 20px;
    padding-left: 10px;
    opacity: 1;
}
.ninja-footable-loader .footable-empty > td {
    display: block;
    width: 1px;
    height: auto;
    position: relative;
    opacity: 0;
}
.ninja-footable-loader .footable-empty.complete {
    width: auto;
}
.ninja-footable-loader .footable-empty.complete::before {
    content: "No results found.";

}
.footable-filtering .footable-filtering-search {
    display: none !important;
}
#vin-search-results .footable-loader{display:none;}
#vin-search-results > .vin-loader{display:none;}
#vin-search-results.loading {position:relative; overflow:hidden; min-height: calc(65px + 2em);}
#vin-search-results.loading > .vin-loader {display: flex; position: absolute; top:0; left: 0; width: 100%; height: 100%;background: var(--bg-color); justify-content: center;align-items: center;z-index: 10;align-items:flex-start;padding-top: 2em;overflow:hidden}
#vin-search-results.loading > .vin-loader .spinner {border: 8px solid #f3f3f3;border-top: 8px solid #3498db;border-radius: 50%;width: 50px;height: 50px;animation: vin_loader_spin 1s linear infinite;}
@keyframes vin_loader_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#vin-search-results .invalid-vin{background: #ffd8d8;border: 2px solid red;padding: 1em;}
/* -------------------- Table Classes --------------------- */
#vin-search-results > .footable_parent > table.ninja_stacked_table .hide-on-stackable{display:none;}
/* ------------------------ Icons ------------------------- */

/* The following three rules allow us to add icons to elements by simply adding the standard FontAwesome classes to ANY type of element
   while still maintaining the standard FontAwesome functionality of using an  element when that makes more sense.
*/
#vin-search-results > .footable_parent :is(.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas):before{
    font-family: var(--_fa-family);
    font-weight: var(--fa-style, 900);
    width: var(--fa-width, 1.25em);
}

#vin-search-results > .footable_parent :is(.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas):not(i) {
  font-family: inherit;
  font-weight: inherit;
  width: auto;
}

/* The following selector should target all icons no matter if they are a separate  element or just classes placed on some other element */
#vin-search-results > .footable_parent :is(i.fa, i.fa-brands, i.fa-classic, i.fa-regular, i.fa-solid, i.fab, i.far, i.fas),
#vin-search-results > .footable_parent :is(.fa,   .fa-brands,  .fa-classic,  .fa-regular,  .fa-solid,  .fab,  .far,  .fas):not(i):before {
    margin-right: 15px;
    font-size: var(--icon-font-size);
}

#vin-search-results > .footable_parent .status-complete:before {
    color:green;
}

/* --------------------- Table Header --------------------- */
#vin-search h2 {font-size: 1.1em;font-weight: 600;}

/* --------------------- Title Column --------------------- */
/* Hide the column header and make the value a section full width title. JS will add a colspan to the value cell */
#vin-search-results > .footable_parent > table.ninja_stacked_table .vin-search-head-code_description{display: none;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper{cursor: pointer;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-text{font-size: 1.3em; font-weight: bold; text-align:center;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper{position:relative; display:flex!important; align-items:center; justify-content:space-between;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-left{display: flex;align-items:center; justify-content:flex-start;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-status{display:flex; flex-direction: column; align-items: center; margin-right: 2em; min-width: 55px; /*font-family: Open Sans, sans-serif;*/}

#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-status:before{margin-right: 0;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-code-type{display:flex; flex-direction: column; align-items: center; margin-left: 2em; min-width: 40px;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-code-type:before{margin-right: 0;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-code-type .short-value{display:inline-block;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table .title-wrapper .title-code-type .long-value{display:none;}

#vin-search-results > .footable_parent > table:not(.ninja_stacked_table) .vin-search-clmn-code_type .short-value,
#vin-search-results > .footable_parent > table.ninja_stacked_table table tbody .vin-search-clmn-code_type .short-value{display:none;}
#vin-search-results > .footable_parent > table:not(.ninja_stacked_table) .vin-search-clmn-code_type .long-value,
#vin-search-results > .footable_parent > table.ninja_stacked_table table tbody .vin-search-clmn-code_type .long-value{display:inline-block;}

/* ------------------- Documents Column ------------------- */
/* Adjust the styles and make .links responsive */
#vin-search-results > .footable_parent > table .service-campaign-links{font-size: 1.2em;}
#vin-search-results > .footable_parent > table .service-campaign-links .link{display: inline-block; width: calc(100% / var(--num-cols)); min-width: 375px; text-align:left; vertical-align: top; padding: .5em 1em .5em 0;}
#vin-search-results > .footable_parent > table.breakpoint-xs .service-campaign-links .link{width: calc(100% - 1em); min-width:275px;padding: .75em 1em .75em 0;}

/* ---------------------- Accordian ----------------------- */

#vin-search-results > .footable_parent > table.ninja_stacked_table table.accordian thead i{transition: transform 0.3s ease;position:relative; top:50%;left: 0.5em;}
#vin-search-results > .footable_parent > table.ninja_stacked_table table.accordian.closed thead i{transform: rotate(180deg);}

/* ----------------------- Tabs -------------------------- */

#vin-search #vin-search-tabs {display: none;}
#vin-search #vin-search-results > .footable_parent table .tab-instructions{text-align: left;margin: 0;font-weight: 400; font-style: italic;}

#vin-search.tabs-toggled-on #vin-search-results.initialized { padding:1em; border: 2px solid black;}
#vin-search.tabs-toggled-on .vin_search_tabs_input{display: none;}
#vin-search.tabs-toggled-on #vin-search-tabs {position:relative; z-index: 20; display:flex; justify-content: space-between; align-items: center; }
#vin-search.tabs-toggled-on #vin-search-tabs .tab-button {transform: translateY(1px);background-color: transparent;border: 2px solid rgba(0, 0, 0, 0.2); border-bottom: none; outline: none;cursor: pointer;padding: 14px 16px; margin: 0 .2em 0 0; transition: background-color 0.3s; font-size: 17px;border-radius: 10px 10px 0 0;}

#vin-search.tabs-toggled-on #vin-search-results > .footable_parent table.breakpoint-xs .tab-instructions{text-align: center;}
#vin-search.tabs-toggled-on #vin-search-tabs .tab-button.active:before {
    content: "";
    position: absolute;
    height:5px;
    width:100%;
    background-color: var(--bg-color);
    bottom:-4px;
    left:0;
    
}

#vin-search.tabs-toggled-on #vin-search-tabs .tab-button.active {
    position:relative;
    border: 2px solid black;
}

/* ----------------------- Filters -------------------------- */
#vin-search-results > .footable_parent > table .footable-filtering th { background-color: transparent;border-color: transparent;}
#vin-search-results > .footable_parent > table .footable-filtering .form-group{text-align: left;}

.semantic_ui .ninja_stacked_table.ui.striped.table tbody tr:nth-child(2n), .semantic_ui .ui.striped.table>tr:nth-child(2n) { background-color: transparent;}

.semantic_ui .ninja_stacked_table.ui.striped.table table tbody tr:nth-child(2n), .semantic_ui .ninja_stacked_table.ui.striped.table table > tr:nth-child(2n){background-color: rgba(0, 0, 50, .02);}